Vue中axios使用详解

一:axios定义

axios是什么:axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库

axios的作用:axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。

具备以下特征:

     a.从浏览器中创建 XMLHttpRequest
     b.从 node.js 发出 http 请求
     c.支持 Promise API
     e.拦截请求和响应
     f.转换请求和响应数据
     g.取消请求
     h.自动转换JSON数据
     i.客户端支持防止 CSRF/XSRF
Promise是什么:Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise。

是一个对象用来传递异步操作的信息,它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的api,可供进一步的处理。

promise的作用:Promise的出现主要是解决地狱回调的问题,比如你需要结果需要请求很多个接口,这些接口的参数需要另外那个的接口返回的数据作为依赖,这样就需要我们一层嵌套一层,但是有了Promise 我们就无需嵌套。

promise的本质是什么:分离异步数据获取和业务

1、 安装axios:npm install axios

2、 在App.vue中引入axios:import axios from 'axios'

Vue.use(axios) // 注意 这样的用法是错误的,axios不支持Vue.use()的声明方式

但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题

Vue.prototype.$ajax = axios

在 main.js 中添加了这两行代码之后,就能直接在组件的 methods 中使用 $ajax 命令;

如果不加 Vue.prototype.$ajax = axios这句的话,则直接使用axios.get()

使用get请求数据

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

 这是axios的回调函数,.then为请求成功的回调函数,而.catch为请求失败的回调函数。

这两个回调函数都有各自独立的作用域,如果直接在里面访问 this,无法访问到 Vue 实例,怎么办?

只要添加一个 .bind(this) 就能解决这个问题

then(function(res){
 console.log(this.data)
}.bind(this))

执行 POST 请求

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

执行多个并发请求

function getUserAccount() {
return axios.get('/user/12345');
}
 
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//两个请求现已完成
}));

执行delete删除数据

axios.delete(`/user/${id}`)
.then(res=>(this.todos=this.todos.filter(todo=>todo.id!==id)))
.catch(err=>console.log(err));

二、vue cli脚手架前端调后端数据接口时候的本地代理跨域。 

如我在本地localhost访问接口http://40.00.100.100:3002/是要跨域的,相当于浏览器设置了一到门槛,会报错XMLHTTPRequest can not load http://40.00.100.100:3002/. Response to preflight request doesn’t pass access control…. 在webpack配置一下proxyTable就OK了,如下
config/index.js

dev: {
    加入以下
    proxyTable: {
      '/api': {
        target: 'http://40.00.100.100:3002/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
        }
      }
    },

 

试一下,跨域成功了,但是注意了,这只是开发环境(dev)中解决了跨域问题,生产环境中真正部署到服务器上如果是非同源还是存在跨域问题,如我们部署的服务器端口是3001,需要前后端联调,第一步前端我们可以分生产production和开发development两种环境分别测试,在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST,开发环境中我们用上面配置的代理地址api,生产环境下用正常的接口地址,所以这样配置

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',//开发环境
  API_HOST:"/api/"
})


module.exports = {
  NODE_ENV: '"production"',//生产环境
  API_HOST:'"http://40.00.100.100:3002/"'
}

当然不管是开发还是生产环境都可以直接请求http://40.00.100.100:3002/。配置好之后测试时程序会自动判断当前是开发还是生产环境,然后自动匹配API_HOST,我们在任何组件里都能用process.env.API_HOST来使用地址如

instance.post(process.env.API_HOST+'user/login', this.form)

 

然后第二步后端服务器配置一下cros跨域即可,就是access-control-allow-origin:*允许所有访问的意思。

综上:开发的环境下我们前端可以自己配置个proxy代理就能跨域了,真正的生产环境下还需要后端的配合的。某大神说:此方法ie9及以下不好使,如果需要兼容,最好的办法是后端在服务器端口加个代理,效果类似开发时webpack的代理。

三、拦截器

在请求或响应被 then 或 catch 处理前拦截它们(拦截器可以做什么:在请求或者响应时拦截下来进行处理)

拦截器分为请求拦截器和响应拦截器

请求拦截器(interceptors.requst)是指可以拦截每次或指定HTTP请求,并可修改配置项。

响应拦截器(interceptors.response)可以在每次HTTP请求后拦截住每次或指定HTTP请求,并可修改返回结果项。

拦截器的工作流程:

/添加请求拦截器
axios.interceptors.request.use(function(config){
     //在发送请求之前做某事
     return config;
   },function(error){
     //请求错误时做些事
     return Promise.reject(error);
   });
 
//添加响应拦截器
axios.interceptors.response.use(function(response){
     //对响应数据做些事
     return response;
   },function(error){
     //请求错误时做些事
     return Promise.reject(error);
   });

删除拦截器

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

将拦截器添加到axios的自定义实例

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

四、消除

您可以使用取消令牌取消请求。axios cancel token API基于可取消的promise提议,目前处于阶段1。

您可以使用CancelToken.source工厂创建一个取消令牌,如下所示:

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
 
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
 
//取消请求(消息参数是可选的)
source.cancel('操作被用户取消。');

您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌:

var CancelToken = axios.CancelToken;
var cancel;
 
axios.get('/ user / 12345',{
   cancelToken:new CancelToken(function executor(c){
     //一个执行器函数接收一个取消函数作为参数
     cancel = c;
   })
});
 
// 取消请求
clear();

五、处理错误

axios.get('/ user / 12345')
   .catch(function(error){
     if(error.response){
       //请求已发出,但服务器使用状态代码进行响应
       //落在2xx的范围之外
       console.log(error.response.data);
       console.log(error.response.status);
       console.log(error.response.headers);
     } else {
       //在设置触发错误的请求时发生了错误
       console.log('Error',error.message);
     }}
     console.log(error.config);
   });

您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。

axios.get('/ user / 12345',{
   validateStatus:function(status){
     return status < 500; //仅当状态代码大于或等于500时拒绝
   }}
})

六、使用application / x-www-form-urlencoded格式

默认情况下,axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据,您可以使用以下选项之一。

浏览器

在浏览器中,您可以使用URLSearchParams API,如下所示:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
//请注意,所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)。

或者,您可以使用qs库对数据进行编码:

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

Node.js

在node.js中,可以使用querystring模块,如下所示:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

TypeScript

axios包括TypeScript定义。

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

 

你可能感兴趣的:(Vue基础)