Vue之Axios AJAX封装

前言

才不要写前言，Axios中文文档https://www.kancloud.cn/yunye/axios/234845

安装Axios

文档里都有，我不细讲了，进入项目

$ npm install --save-dev axios
# 或者
$ cnpm install --save-dev axios

目录结构

详细代码

1. index.js （Axios的配置文件）

import axios from 'axios';      // 引入axios
import qs from 'qs';            // 引入qs
import APIUrl from './api.url'; // 引入api.url.js

// axios 默认配置  更多配置查看Axios中文文档
axios.defaults.timeout       = 5000;             // 超时默认值
axios.defaults.baseURL       = APIUrl.baseURL;   // 默认baseURL
// axios.defaults.responseType  = 'json'         // 默认数据响应类型
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8';
axios.defaults.withCredentials = true;           // 表示跨域请求时是否需要使用凭证

// http request 拦截器
// 在ajax发送之前拦截 比如对所有请求统一添加header token
axios.interceptors.request.use(
config => {
if (token) {
config.headers.Authorization = `token ${token}`;
}
return config;
},
err => {
return Promise.reject(err);
}
);

// http response 拦截器
// ajax请求回调之前拦截 对请求返回的信息做统一处理 比如error为401无权限则跳转到登陆界面
axios.interceptors.response.use(
response => {
switch (response.data.error) {
case 401:
response.data.msg = '未授权，请登录';
break;
default:
break;
}
return response;
},
error => {
console.log(error);
return Promise.reject(error);
}
);

export default axios;  // 这句千万不能漏下！！！

/**
* post 方法封装
* @param url
* @param data
* @returns {Promise}
*/
export function post (url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(data))
.then(response => {
resolve(response.data);
}, err => {
reject(err);
});
});
}
/**
* get 方法封装
* @param url
* @param data
* @returns {Promise}
*/
export function get (url, data = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {params: data})
.then(response => {
resolve(response.data);
}, err => {
reject(err);
});
});
}

/**
* 其他delete等的封装类似
* 可以查看中文文档 自行封装
*/

其他页面调用

import {post, get} from '@/axios/index';

// 就可以使用 post 和 get 了
// 其他的类似

2. api.url.js

API的路由地址，统一写在一个文件里，其他页面调用，方便后期更改url。毕竟当页面多的时候，api url换了总不可能每个页面都去改过吧。

其实这个文件里的内容非常简单

export default {
DOMAIN               : 'http://www.baidu.com',
baseURL              : 'http://www.baidu.com/api/v1',
/* Util API */
util: {
image            : '/util/image.html',          // 图片上传
},
};

其他页面要调用

import APIUrl from '@/axios/api.url';

var img_url = APIUrl.util.image; // 这个就是图片上传的api url

最后

还有最重要的一步

当然就是找到main.js这个入口文件

在里面import一下axios的index文件

import App from './App';
import router from './router/index';
import axios from './axios/index'; // 这里这里

Vue.config.productionTip = false;

new Vue({
el: '#app',
router,
axios, // 还有 这里这里
render: h => h(App)
});

Axios 封装完成！！！