背景：请求失败后，因跨域引起的不能传递statusCode问题，通过设置前后台选项解决，这里先总结一下axios的使用
一、安装与配置：
安装：
npm install axios
axios使用API:
1.默认使用的是get请求：
//Send a GET request (default method)
axios(‘/user/12345‘);
2.常用2种请求方式：
//GET ：获取图片
axios({
method:‘get‘,
url:‘http://bit.ly/2mTM3nY‘,
responseType:‘stream‘})
.then(function(response) {
response.data.pipe(fs.createWriteStream(‘ada_lovelace.jpg‘))
});//Send a POST request
axios({
method:‘post‘,
url:‘/user/12345‘,
data: {
firstName:‘Fred‘,
lastName:‘Flintstone‘}
});
3.自定义配置axios：
//全局more设置
axios.defaults.baseURL = ‘‘;
axios.mon[‘Authorization‘] =AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;//自定义设置
const instance =axios.create({
baseURL:‘https://some-/api/‘,
timeout:1000,
headers: {‘X-Custom-Header‘: ‘foobar‘}
});
//全局与个别请求设置
instance.defaults.timeout= 2500;
instance.get(‘/longRequest‘, {
timeout:5000});
//设置token
const CancelToken =axios.CancelToken;
const source=CancelToken.source();
axios.get(‘/user/12345‘, {
cancelToken: source.token
}).catch(function(thrown) {if(axios.isCancel(thrown)) {
console.log(‘Request canceled‘, thrown.message);
}else{//handle error
}
});
axios.post(‘/user/12345‘, {
name:‘new name‘}, {
cancelToken: source.token
})//cancel the request (the message parameter is optional)
source.cancel(‘Operation canceled by the user.‘);
//自定义取消token
const CancelToken =axios.CancelToken;
let cancel;
axios.get(‘/user/12345‘, {
cancelToken:new CancelToken(functionexecutor(c) {//An executor function receives a cancel function as a parameter
cancel =c;
})
});//cancel the request
cancel();
4.请求配置：
{
url:‘/user‘,
method:‘get‘, //default
baseURL: ‘https://some-/api/‘,
transformRequest: [function(data, headers) {
returndata;
}],
transformResponse: [function(data) {
returndata;
}],
headers: {‘X-Requested-With‘: ‘XMLHttpRequest‘},
params: {
ID:12345},
paramsSerializer: function(params) {return Qs.stringify(params, {arrayFormat: ‘brackets‘})
},
data: {
firstName:‘Fred‘},//设置请求超时.
timeout: 1000, //default is `0` (no timeout)
//【是否使用凭证】
withCredentials: false, //default
adapter: function(config) {/*...*/},
auth: {
username:‘janedoe‘,
password:‘s00pers3cret‘},
responseType: ‘json‘, //default
responseEncoding: ‘utf8‘, //default
xsrfCookieName: ‘XSRF-TOKEN‘, //default
xsrfHeaderName: ‘X-XSRF-TOKEN‘, //default
onUploadProgress: function(progressEvent) {//Do whatever you want with the native progress event
},
onDownloadProgress: function(progressEvent) {//Do whatever you want with the native progress event
},
maxContentLength: 2000,
validateStatus: function(status) {return status >= 200 && status < 300; //default
},
maxRedirects: 5, //default
socketPath: null, //default
httpAgent: new http.Agent({ keepAlive: true}),
httpsAgent:new https.Agent({ keepAlive: true}),
proxy: {
host:‘127.0.0.1‘,
port:9000,
auth: {
username:‘mikeymike‘,
password:‘rapunz3l‘}
},
cancelToken: new CancelToken(function(cancel) {
})
}
5.返回配置：
{//`data` is the response that was provided by the server
data: {},//`status` is the HTTP status code from the server response
status: 200,//`statusText` is the HTTP status message from the server response
statusText: ‘OK‘,//`headers` the headers that the server responded with
//All header names are lower cased
headers: {},//`config` is the config that was provided to `axios` for the request
config: {},//`request` is the request that generated this response
request: {}
}
6.拦截操作：返回正确后操作，返回错误操作
axios.get(‘/user/12345‘)
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
axios.get(‘/user/12345‘)
.catch(function(error) {if(error.response) {//The request was made and the server responded with a status code
//that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
}else if(error.request) {//The request was made but no response was received
//`error.request` is an instance of XMLHttpRequest in the browser and an instance of
//http.ClientRequest in node.js
console.log(error.request);
}else{//Something happened in setting up the request that triggered an Error
console.log(‘Error‘, error.message);
}
console.log(error.config);
});
在main.js导入:
//引入axios，并加到原型链中
import axios from ‘axios‘;
Vue.prototype.$axios=axios;
import QS from‘qs‘Vue.prototype.qs= QS;
设置代理解决跨域：
import axios from ‘axios‘import qs from‘qs‘axios.defaults.timeout= 5000; //响应时间
axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=UTF-8‘; //配置请求头
axios.defaults.baseURL = ‘‘; //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) =>{//在发送请求之前做某件事
if(config.method === ‘post‘){
config.data=qs.stringify(config.data);
}returnconfig;
},(error)=>{
console.log(‘错误的传参‘)returnPromise.reject(error);
});//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{//对响应数据做些事
if(!res.data.success){returnPromise.resolve(res);
}returnres;
}, (error)=>{
console.log(‘网络异常‘)returnPromise.reject(error);
});//返回一个Promise(发送post请求)
export functionfetchPost(url, params) {return new Promise((resolve, reject) =>{
axios.post(url, params)
.then(response=>{
resolve(response);
}, err=>{
reject(err);
})
.catch((error) =>{
reject(error)
})
})
}返回一个Promise(发送get请求)
export functionfetchGet(url, param) {return new Promise((resolve, reject) =>{
axios.get(url, {params: param})
.then(response=>{
resolve(response)
}, err=>{
reject(err)
})
.catch((error) =>{
reject(error)
})
})
}
exportdefault{
fetchPost,
fetchGet,
}
vue-cli 3.0的在 package.json 同级目录新建一个 vue.config.js 文件，加入下面代码，其他版本找到配置文件的devServer加入代码，如下：
module.exports ={//axios域代理，解决axios跨域问题
baseUrl: ‘/‘,
devServer: {
proxy: {‘‘: {
target:‘http://192.168.0.108:8090‘,
changeOrigin:true,
ws:true,
pathRewrite: {
}
}
}
}
}
实例：get/post
const axios = require(‘axios‘);//1.在url中携带
axios.get(‘/user?ID=12345‘) // get
.then(function(response) {//handle success
console.log(response);
})
.catch(function(error) {//handle error
console.log(error);
})
.then(function() {//always executed
});//2.通过对象params传递
axios.get(‘/user‘, {
params: {
ID:12345}
})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
})
.then(function() {//always executed
});//3.异步请求
async functiongetUser() {try{
const response= await axios.get(‘/user?ID=12345‘);
console.log(response);
}catch(error) {
console.error(error);
}
}
axios.post(‘/user‘, { // post
firstName:‘Fred‘,
lastName:‘Flintstone‘})
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
执行多个并发请求：
functiongetUserAccount() {return axios.get(‘/user/12345‘);
}functiongetUserPermissions() {return axios.get(‘/user/12345/permissions‘);
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function(acct, perms) {//Both requests are now complete
}));
使用封装请求https.js，简化操作：
import https from ‘../https.js‘ //注意用自己的路径
loginPost:function() {
let params={‘username‘: ‘admin‘, ‘password‘: ‘admin123‘}
https.fetchPost(‘/login‘,params ).then((data) =>{//console.log(‘fetchPost‘,data)
}).catch(err=>{
console.log(err)
}
)
},
indexPost2:function(date) {// ...
},
补：默认情况下，axios将JavaScript对象序列化为JSON。要以application/x-www-form-urlencoded格式
1.Json对象转字符串：用JSON.stringify()将对象a变成了字符串c，那么我就可以用JSON.parse()将字符串c还原成对象a
let arr = [1,2,3];
JSON.stringify(arr);//‘[1,2,3]‘
typeof JSON.stringify(arr);//string
let string= ‘[1,2,3]‘;
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object
作用1：判断是否包含、相等、
//判断数组是否包含某对象
let data =[
{name:‘echo‘},
{name:‘听风是风‘},
{name:‘天子笑‘},
],
val= {name:‘天子笑‘};
JSON.stringify(data).indexOf(JSON.stringify(val))!== -1;//true
//判断两数组/对象是否相等
let a = [1,2,3],
b= [1,2,3];
JSON.stringify(a)=== JSON.stringify(b);//true
作用2：本地数据缓存
//存
functionsetLocalStorage(key,val){
window.localStorage.setItem(key,JSON.stringify(val));
};//取
functiongetLocalStorage(key){
let val=JSON.parse(window.localStorage.getItem(key));returnval;
};//测试
setLocalStorage(‘demo‘,[1,2,3]);
let a= getLocalStorage(‘demo‘);//[1,2,3]
作用3：深拷贝
//深拷贝
functiondeepClone(data) {
let _data=JSON.stringify(data),
dataClone=JSON.parse(_data);returndataClone;
};//测试
let arr = [1,2,3],
_arr=deepClone(arr);
arr[0] = 2;
console.log(arr,_arr)//[2,2,3] [1,2,3]
区分：toString()虽然可以将数组转为字符串，但并不能对{name:‘天子笑‘}这类对象实现你想要的操作，它的受众更多是数字。
2.node,js：
const querystring = require(‘querystring‘); //node.js内
axios.post(‘/‘, querystring.stringify({ foo: ‘bar‘ }));
3.使用“qs”工具转换：
//const qs = require(‘qs‘);
import qs from ‘qs‘; //推荐使用es6
axios.post(‘/foo‘, qs.stringify({ ‘bar‘: 123 })); //方式1
const data= { ‘bar‘: 123};
const options={
method:‘POST‘,
headers: {‘content-type‘: ‘application/x-www-form-urlencoded‘},
data: qs.stringify(data),
url,
};
axios(options);//方式2
原文：/wheatCatcher/p/11398837.html
