axios 封装 | vue

这里把api也统一存放管理了，首先要在src中创建文件utils --> http.js（封装axios使用） 和 api --> index.js（api总站指挥中心） & article.js（api个体集） 下边是图片演示，了解后我们就可以开始安装使用axios了

1、运行安装命令

npm install axios

2、开始使用axios

打开刚创建好的utils -> http.js

import axios from 'axios'

// 创建一个axios实例
const instance = axios.create({
	// 公共接口，process.env.BASE_API是config文件中xxx.env.js配置
    baseURL: process.env.BASE_API
})

/**
 * 请求失败后的错误统一处理
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status) => {
    // 状态码判断下边只是举例根据自己的需求处理业务
    switch (status) {
        case 404:
            alert('请求的资源不存在')
            break;
        default:
            console.log('other');
  	}
}

// 设置post请求头
// instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

// 请求拦截器
instance.interceptors.request.use (
	config => {
		// 在这里可以做一些请求前的操作比如请求头，超时时间(这里设置了3秒), 数据加密给服务端验证等等
        config.timeout = 3 * 1000;
        // 设置请求头也可以放在请求拦截器之前(上边注释掉了)，写在这里可以按需设置'multipart/form-data' || 'application/x-www-form-urlencoded'
        config.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        
        return config
	},
	error => Promise.error(error)
)

// 响应拦截器
instance.interceptors.response.use(
	// 请求成功
    response => {
    	// 这里可根据接口返回状态统一管理提示信息等内容
		response.status === 200 ? return Promise.resolve(response) : return Promise.reject(response)
    },
    // 请求失败
    error => {
        const { response } = error;
        if (response) {
            // 请求已发出，但是不在2xx的范围
            errorHandle(response.status)
            return Promise.reject(response)
        } else {
            // 请求超时或断网时
            alert('请求超时')
            return Promise.reject(response)
        }
    }
)

export default instance

3、使用api

打开刚创建好的api -> index.js & article.js

// 编写article.js 先把上边封装好的引入文件中
import axios from '@/utils/http'

// 开始入库
const article = {
	// 例如:
    login () {
		return axios.post('/目录/login', params)
	}
    ...
}

export default article



// 编写index.js api的总指挥中心
import article from '@/api/article'
...（更多按需求）

// 导出接口
export default {
    article
    ...（更多按需求）
}

4、在main.js中引入api

import api from './api'

// 将api挂载到vue的原型上
Vue.prototype.$api = api

5、实例

this.$api.article.login({
  	account: '账号',
    password: '密码'
}).then(res=> {
  	console.log(res)
}).catch(err => {
  	console.log(err)
})