基于vue封装axios请求
2019-02-15 本文已影响139人
chenjundi
一、下载axios插件
npm install axios -S
下载慢的小伙伴可以使用淘宝镜像cnpm安装。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install axios -S
二、利用promise封装一个http请求(http.js)
//引入安装的axios插件
import axios from 'axios'
const http = options => {
return new Promise((resolve, reject) => {
const defaultOptions = {};
const newOptions = {
...defaultOptions,
...options
};
//headers默认传递json格式数据,这里也可以设置token,每次调用都会携带
newOptions.headers = {
'content-Type': 'application/json;charset=UTF-8',
...newOptions.headers
};
//这里可以在调用的时候看到你的method、url、data、headers等参数
//console.log(newOptions);
axios({
method: newOptions.method,
url: newOptions.url,
data: newOptions.data,
headers: newOptions.headers
}).then(res => {
//根据返回的状态码判断,注意res返回的并不一定都是status,比如小程序就是statusCode
if (res.status == 200) {
//这里我们只需要获取返回的data中的数据即可
resolve(res.data);
} else {
reject(res);
}
}).catch(err => {
reject(err);
})
})
};
export default http
三、调用封装好的http文件(https.js在utils目录下)
import http from '@/utils/http'
http({
//这里是你自己的请求方式、url和data参数
method: 'post',
url: url,
data: {},
//假设后台需要的是表单数据这里你就可以更改
headers: {
"Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"
}
}).then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});