Vue官方推荐AJAX组件axios.js使用方法详解与API(2)

{ data:{}, status:200, //从服务器返回的http状态文本 statusText:'OK', //响应头信息 headers: {}, //`config`是在请求的时候的一些配置信息 config: {} }

你可以这样来获取响应信息

axios.get('/user/12345') .then(function(res){ console.log(res.data); console.log(res.status); console.log(res.statusText); console.log(res.headers); console.log(res.config); })

Axios默认配置

你可以设置默认配置,对所有请求都有效

1、 全局默认配置

axios.defaults.baseURL = 'http://api.exmple.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['content-Type'] = 'appliction/x-www-form-urlencoded';

2、 自定义的实例默认设置

//当创建实例的时候配置默认配置 var instance = axios.create({ baseURL: 'https://api.example.com' }); //当实例创建时候修改配置 instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;

3、 配置中的有优先级

config配置将会以优先级别来合并,顺序是lib/defauts.js中的默认配置,然后是实例中的默认配置,最后是请求中的config参数的配置,越往后等级越高,后面的会覆盖前面的例子。

//创建一个实例的时候会使用libray目录中的默认配置 //在这里timeout配置的值为0,来自于libray的默认值 var instance = axios.create(); //回覆盖掉library的默认值 //现在所有的请求都要等2.5S之后才会发出 instance.defaults.timeout = 2500; //这里的timeout回覆盖之前的2.5S变成5s instance.get('/longRequest',{ timeout: 5000 });

Axios拦截器

你可以在请求、响应在到达then/catch之前拦截他们

//添加一个请求拦截器 axios.interceptors.request.use(function(config){ //在请求发出之前进行一些操作 return config; },function(err){ //Do something with request error return Promise.reject(error); }); //添加一个响应拦截器 axios.interceptors.response.use(function(res){ //在这里对返回的数据进行处理 return res; },function(err){ //Do something with response error return Promise.reject(error); })

Axios取消拦截器

var myInterceptor = axios.interceptor.request.use(function(){/*....*/}); axios.interceptors.request.eject(myInterceptor);

3、 给自定义的axios实例添加拦截器

var instance = axios.create(); instance.interceptors.request.use(function(){})

Axios错误处理

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/53cb16ae6ed65129f185e1661ae57274.html