axais初步接触(二)

默认配置

axios的默认配置是可以修改的,修改后用于所有的请求。

全局axios默认值

axios.defaults.baseRUL='http://baidu.com';
axios.defaults.headers.common['Authorization']=AUTH_TOKEN;
axios.defaults.post['Content-Type']='appliccaion/x-www-form-urlencoded';

自定义实例默认值

//创建实例设置配置默认值
const instance= axios.create({
 baseURL:'https://api.com'
})

//实例创建后修改默认值
instance.defaults.headers.common['Authorization']=AUTH_TOKEN;

配置优先级顺序

配置将与优先级合并。顺序是lib/defaults.js里的库默认值,然后是实例的默认值,最后是请求的config的参数值。后者的优先级高于前者。

//创建一个实例,使用库提供的配置默认值
//此时,config配置值是0,因为库的默认值就是0
const instance=axios.create();

//覆盖库的timeout默认值
//现在所有使用这个实例的请求都将在超时前等待2.5秒
instance.defaults.timeoout=2500;

//覆盖请求的timeout,因为已知它需要更长的时间
instance.get('./longRequest',{
 timeou:5000
})

Interceptors拦截器

你可以拦截请求或者响应在他们被then或者catch处理之前

//添加一个请求拦截器
axios.intercepters.request.use(function(config){
 //do something before request is sent
 return config;
},funcction(error){
 //do something with request error
 return Promise.rejet(error);
})

//添加一个响应拦截器
axios.interceptors.response.use(function(response){
 //do something with the response data
 return response;
},function(error){
 //do something with the response error
 return Promise.reject(error);
})

实例:

service.interceptors.request.use((config) => {
 store.commit(STORE_TYPE.IS_LOADING,true);
 if(config.method === 'post'){
  config.data = qs.stringfy(config.data); 
 }
 return config;
},(error) => {
 console.log('错误的传参','fail');
 return Promise.reject(error);
})

//响应拦截器
service.interceptors.response.use((res) => {
 store.commit(STORE_TYPE_IS_LADING,false);
 if(res.data.code==0){
  Message({
   message:res.data.msg,
   type:'error',
   duration: 5*1000
  })
  return Promise.reject(res)
 }
 return res;
},(error) => {
 store.commit(STORE_TYPE_IS_LOADING,false);
 console.log("网络异常",'fail');
 return Promise.reject(error);
})

后面你可能需要移除拦截器,可以的!

const myInterceptor=axios.interceptors.request.use(function9){
})
axios.interceptors.request.eject(myInterceptor);//移除拦截器

你也可以给一个自定义的axios实例添加拦截器

const instance=axios.create();
instance.interceptors.request.use(function(){/*...*/});

错误处理

axios.get('/user/123')
 .catch(function(error){
  if(error.response){
  //发送请求后服务器生成了一个超出2XX范围的状态码
   console.log(error.response.data);
   console.log(error.response.status);
   console.log(error.response.heders);
   console.log(error.response.headers);
  }else if(error.request){
  //请求发送后没有得到响应
  //error.request是一个浏览器的XMLHttpRequest实例或者nodejs里的http.ClientRequest
   console.log(error.request);
  }else{
   //设置请求时发生了一些事触发了一个错误
   console.log('Error',error.message);
  }
  console.log(error.config);
 })

你可以使用validateStatus配置选项定义一个自定义的HTTP状态码错误范围

axios.get('/user/133',{
 validateStatus:function(status){
  return status < 500;   //当状态码等于或大于500的时候reject
 }
})

消除

你可以使用cancel token取消一个请求

axios cancel token API 基于已经被撤回的,并不再活跃于TC39的可取消promises协议

const CancelToken=axios.CancelToken;
const source=CancelToken.source();
//取消请求get写法
axios.get('/user.123',{
 CancelToken: source.token
}).catch(function(thrown){
 if(axios.isCancel(thrown)){
  console.log('Request canceled',thrown.message);
 }else{
  //handle error
 }
});
//取消请求post写法
axios.post('/user/123',{
 name:'new name'
},{
 cancelToken:source.token
})

//取消请求
source.cancel('Operation canceled by the user.');

你也可以通过给CancelToken的构造函数传递一个executor函数来创建一个cancel token。

const CancelToken=axios.CancelToken;
let cancel;
axios.get('/user/123',{
 cancelToken:new CancelToken(function executor(c){//一个executor函数接收一个cancel函数作为参数
  cancel=c;
 })
});
//取消请求
cancel();

注意:你可以使用同一个cancel token取消多个请求/

使用application/x-www-form-urlencoded f格式

默认地,axios序列化js对象为JSON。如果不用JSON格式而是以application/x-www-form-urlencoded格式发送数据的话,你可以使用以下的选项之一。

Browser

在浏览器中,你可以使用URLSerachParams API

const params=new URLSerachParams();
params.apend('param1':'values1');
params.apend('param2':'values2');
axios.post('/foo',params);

注意:URLSearchParams并非支持所有浏览器see in can i use,但是有个polyfill可以用(确保polyfill全局环境)

或者,你可以使用qs库编码数据。

const qs = require('qs');
axios.post('/foo',as.stringify({ 'bar':123 }));

或者另一种方式(ES2015),

iport qs from 'qs' 
const data = { 'bar':123 }
const options = {
 method: 'POST',
 headers: { 'content-type': 'application/x-www-form-urlencoded' },
 data: as.stringfy(data),
 url,
};
axios(options);

Node.js

在nodejs里,你可以使用querystring模块或者qs模块可以替代。

const querystring=require('querystring');
axios.post('http://baidu.com',querystring.stringfigy({ foo:123 }));

Semver

在axios达到1.0版本之前,破坏性更改将以新的次要版本发布。例如0.5.1和0.5.4将具有相同的API,但0.6.0将具有重大变化。

Promises

axios依赖于原生ES6 Promise实现的支持。如果您的环境不支持ES6 Promise,则可以使用[polyfill](https://github.com/stefanpenner/es6-promise)。

TypeScript

axios包括TypeScript定义。

import axios from 'axios';
axios.get('/user?ID=123');

axios在很大程度上受到Angular提供的 h t t p a x i o s A n g u l a r 使 http-like服务。

猜你喜欢

转载自blog.csdn.net/e_li_na/article/details/80279237