Axios 封装及接口管理

下载： npm i axios

在main.js中配置：

import axios from 'axios'
Vue.prototype.$axios=axios

Axios的封装：

在src下新建一个utils文件夹，在新建一个文件service：         

service.interceptors.request.use 里可以设置请求头，比如设置 token
config.hideloading 是在 api 文件夹下的接口参数里设置，下文会讲
service.interceptors.response.use 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录

配置三部分：分别为基础配置、请求拦截、相应拦截

import axios from 'axios'

//基础配置

import { baseUrl } from '@/config' // 根据环境不同引入不同api地址

import store from '@/store'

import { Toast } from 'vant'

let service = axios.create({

    baseURL: baseUrl, // url = base api url + request url

    timeout: 5000 // request timeout

})

// 请求拦截

let loading;

service.interceptors.request.use(config => {

// 不传递默认开启loading

    loading = Toast.loading({

        message: '加载中...',

        forbidClick: true,

    });

    if (store.state.token) {

        config.headers['Authorization'] = 'Bearer ' + store.state.token

    } //根据自己的需求填写token值

    return config

}, error => {

    console.log(error)

    return Promise.reject(error)

})

// 响应拦截器

service.interceptors.response.use(res => {

    Toast.clear()

    return Promise.resolve(res || 'error')

}, error => {

    Toast.clear()

    console.log('err' + error)

    return Promise.reject(error)

})

export default service

也可以封装方法：

在utils文件夹下 新建个文件request_ui.js文件，里面 放一些接口，比如：

module.exports = {
    login: '/login'
}

然后在新建一个api文件：

引入前两个文件，比如

import service from './service'
import request_ul from './request_ul'

// 登录
export function login(arg) {
    return service({
        url: request_ul.login,
        data: arg,
        method: 'post'
    })
}

url ：接口地址 请求的时候会拼接上 config 下的 baseApi

method：请求的方法

data：请求的参数 qs.stringify(params) 是对数据系列化操作

如何调用这个方法？

import { login } from "@/utils/apii.js";

async created（）{
    var res=await 方法名()

    console.log(res)
}

这里的方法名就是在api文件中定义的名字，比如login