vue axios封装api

1、安装axios ：npm i axios

2、在src 文件夹中新建netWork文件夹，放入两个文件：http.js和app.js

3、http文件如下：
（1）引入axios：import axios from axios
（2）环境切换：development：开发环境；production：生产环境

if (process.env.NODE_ENV == "development") {
    axios.defaults.baseURL = "http://XXX"
}
if (process.env.NODE_ENV == "production") {
    axios.defaults.baseURL = "https://XXX
}
if (process.env.NODE_ENV == "debug") {
    axios.defaults.baseURL = "https://XXX"
}

（3）设置超时时间

axios.defaults.timeout = 10000

（4）设置请求拦截和响应拦截

//请求拦截 
axios.interceptors.request.use(
config => {
    config.headers = { DeviceType: "H5" }
    const token = store.state.token; 
    return config
})
//响应拦截 对响应的数据做处理
axios.interceptors.response.use(
    response => {

        return response
    },
    error => {
        if (error.response.status) {

        }
    }
)

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！
（5）设置请求方式（get、post）

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res)
            }).catch(err => {
                reject(err)
            })
    })
}

4、api.js中内容如下：
（1）先引入http.js中的get和post方法

import {get,post} from '../http.js'

（2）写入请求地址

export function getbanner(){
    return get('/xxx')
}

5、在main.js里面全局注册使用

import api from './netWork/api.js'
Vue.prototype.$api = api

6、在组件内使用

this.$api.getbanner()