Vue2.0 API封装总结

第一步

• 在项目中创建一个工具文件夹 utils 文件夹名称可以随意更改（utils是一种约定俗称的名称）
• 在utils文件夹中创建一个server.js 该文件的名字也可以随意命名
  配置拦截器功能
  在server.js中

// 导入axios
import axios from 'axios'
// 使用axios创建一个新的服务对象
// 其实server就是axios 只不过是给axios添加了一些基本配置之后的结果而已
const server = axios.create({
    baseURL: 'https://api.it120.cc',
    timeout: 5000 // 请求超时的时间
}) 

// 请求拦截
// interceptors axios的拦截器 request 是请求的意思
server.interceptors.request.use(config => {
    return config
}, err => {
    Promise.reject(err)
    // console.log(err);
})

// 响应拦截
server.interceptors.response.use(res => {
    // 这里可以做请求产生错误的逻辑处理
    return res
}, err => {
    // console.log(err);
    Promise.reject(err)
})
// 导入定义好的请求模块
export default server

使用封装好的axios

• 新建一个api文件夹 专门用来发送axios请求使用
• 在api文件夹中可以根据项目的模块来建立过个发送api请求的模块 以home模块为例

在api文件夹中创建一个home.js文件

    // 导入我们制定好的aixos请求方法
    import server from '@/utils/server'
    // 发送请求的示例 这里以promsie封装为例
    const getBanners = () => {
        return new Promise((resovle, reject) => {
            server.get('请求地址').then(res => {
                resolve(res)
            })
        })
    }

    export {
        getBanners
    }

在要使用接口的vue文件中导入方法

import { getBanners } from '@/api/home'
created() {
    getBanners().then(res =>{
        console.log(res) // 就是请求回来的结果
    })
}