axios的二次封装，请求、base_url、接口统一管理分开处理

首先先来看一下目录结构

 主要有三个文件 api.js  |  url.js  |  conf.js

先来介绍一下这三个 js 文件

api.js，封装的axios代码，源码如下

import axios from 'axios'
import { BASE_URL, API_URL } from './conf'; // 1-引入BASE_URL 和 API_URL，后面再说这两个是什么东西
// const token = sessionStorage.getItem('token'); // 获取本地token

const api = axios.create({
    baseURL: BASE_URL,
    timeout: 5000,
    headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
    },
})

// 请求拦截器,在请求之前执行
api.interceptors.request.use((config) => {
    config.url = API_URL[config.url] // 2-这一步修改url地址,后面再解释
    // 请求携带token
    // if(token) config.headers.token = token 
    return config;
},(error) => {
    return Promise.reject(error);
});

// 响应拦截器,在响应之前执行
api.interceptors.response.use((res) => {
    // if(res.token !== token) console.log('token过期,请重新登录') 
    // 根据业务需求,自行处理
    ...
    return res;
}, (error) => {
    return Promise.reject(error);
});

//注意：如果在uni-app中使用,axios本身不支持app端和小程序端,所以会报错
//添加如下代码即可解决
// 兼容APP端
axios.defaults.adapter = function(config) {
    return new Promise((resolve, reject) => {
        var settle = require('axios/lib/core/settle');
        var buildURL = require('axios/lib/helpers/buildURL');
        uni.request({
            method: config.method.toUpperCase(),
            url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
            header: config.headers,
            data: config.data,
            dataType: config.dataType,
            responseType: config.responseType,
            sslVerify: config.sslVerify,
            complete: function complete(response) {
                response = {
                    data: response.data,
                    status: response.statusCode,
                    errMsg: response.errMsg,
                    header: response.header,
                    config: config
                };
                settle(resolve, reject, response);
            }
        })
    })
}

export default api;

 如果在uni-app中使用axios，会在app端和小程序端报如下错误，解决方法如上代码中有提到

 

---

 

url.js  接口地址统一管理

在 api.js 中 注释1 处引入此处的 url 为 API_URL

在 api.js 中 注释2 处修改url

const url = {
    'loginByPassword':'',//密码登陆
    'getUserList':'/user/userList',//用户列表
}

export default url;

 conf.js 配置文件，包括 BASE_URL

// 将接口地址(API_URL)和BASE_URL都从该文件中导出
import url from './url'
export const API_URL = url // 引入api接口

let base_url;
console.log(process.env.NODE_ENV)
// 根据环境变量配置不同的base_url
if (process.env.NODE_ENV == 'development') {    
    base_url = '';
} else if (process.env.NODE_ENV == 'debug') {    
    base_url = 'https://www.ceshi.com';
} else if (process.env.NODE_ENV == 'production') {    
    base_url = 'http://xxx.xxx.xx.xxx:xxxx/';
}

export  const BASE_URL = base_url;

最后在组件中使用

export default{
    methods:{
        getUserList(){
            // 调用vuex中的异步方法请求数据
            this.$store.dispatch('getUserList').then(res => {
                console.log(res)
            }).catch(e => {
                console.log(e)
            }) 
        }
    }
}

 这里是vuex中的异步方法

import api from '@/conf/api' // 引入封装的axios
const user = {
    state: {},
    getters: {},
    mutations: {},
    actions: {
        // 获取用户列表
        getUserList: () => {
            // 注意，这里的getUserList参数指的是url.js文件中定义的key，他可以找到相对应的api地址
            return api.get('getUserList')
        }
    }
}

export default user;

总的概括就是 组件通过 methods 中一个方法触发 vuex 的 actions 中的方法，该 actions 方法返回一个 axios 请求，该 axios 请求地址是 url.js 中的 key 

开发者只需要改动 conf.js 中的 base_url 和 url.js 中的 接口地址

请求在 vuex 的 actions 中执行，组件中调用 vuex 的异步方法

需要注意的是 ，axios的 get 请求参数 pamas 是 { params : params }的形式，而 post 请求是直接 params 的形式

例：

//get
...
actions:{
    getUserList: (obj,params) => {
        return api.get('getUserList',{params:params})
    }
}
...

//post
...
actions:{
    getUserList: (obj,params) => {
        return api.post('getUserList',params)
    }
}
...

---

个人博客👉：点此进入（http://xueshuai.top）

PHP学习交流群👉：PHP学习交流群

前端学习交流群👉：前端交流群

微信公众号👉：叮当Ding