一篇文章带你了解axios网络交互-Vue

达达前端

发布于 2019-12-24 15:10:50

9530

发布于 2019-12-24 15:10:50

文章被收录于专栏：达达前端达达前端

file

作者 | Jeskson

来源 | 达达前端小酒馆

什么是axios呢？了解，并去使用它，对于axios发送请求的两种方式有何了解，以及涉及axios跨域问题如何解决。

对于axios网络交互，去使用axios的同时，首先你要了解它是什么，如何使用才是。说axios网络交互，即发送请求，前面说两种方法，一为发送GET请求，二为POST请求。

解决axios跨域问题。

要想使用axios，是不是要了解它呢，讲解一下它。axios是基于Promise的HTTP库，可以用在浏览器和node环境中，在应用程序中，向服务器端发送Ajax请求同时获取服务器端相应的HTTP请求响应库。

我们为什么使用它呢？它的好处有哪些。可以单独使用，支持Promise API，解决了JavaScript“回调地狱”的问题，可以发送Cookie，HTTP认证，并发请求，请求和响应的拦截，取消请求等，自动转换json数据，适用于restful api场景。

在vue中通过Ajax从服务器端获取数据，前后端分离，后端负责提供api请求接口，前端用Ajax获取服务器数据。服务器端的api接口，一般使用restful api。

使用Ajax获取数据两种方式：

XMLHTTPRequest对象 JQuery提供的Ajax方法

了解axios的是什么？做什么了，如何使用它呢？使用axios，它的使用很广泛，可以在vue cli中使用，也可以在非Vue cli应用中使用。分两种使用情况，一，在vue cli应用程序中使用axios，二，在vue文件中使用。

第一种情况下，在vue cli应用程序中，那么就要创建vue cli应用程序，然后安装axios，接着配置axios，就可以使用了。

安装axios的方法：

使用Npm或yarn，或者是，使用vue安装axios。

安装完成后，会在插件目录既是plugins中，有axios.js文件，然后在入口文件引入该插件plugins插件。

// main.js
import './plugins/axios'

使用axios可以获取网络数据：

// 实例
created: function(){
 const app = this;
 axios.get('接口').then(res=>{
 app.users = res.data.data;
 });
}

在vue文件中使用axios，引入vue.js文件和axios.js文件，使用axios发送Ajax请求。

script(导入vue.js)
script(导入axios.js)

created: function(){
 // 创建vue实例，axios获取数据
 axios.get('接口').then(function(res){
  console.log(res.data);
 }).catch(function(error){
  console.log(error);
 });
}

发送请求

一般分：发送GET请求，和发送POST请求：

GET传递，请求参数有两种写法，一种是直接在url中附加参数，一种是使用parmas属性添加GET参数。

// url
axios.get('...?name=da').then(function(response){
 console.log(response.data);
 this.user = response.data.data;
 }).catch(function(error){
 console.log(error);
});

// parmas属性
axios.get('...', {
 params: {
  name: 'dada'
 }
})
.then(function(response){
console.log(response.data);
this.users = response.data.data;
}).catch(function(error){
console.log(error);
});

发送post请求：

button(@click="addage")
addage: function(){
 const app = this;
 let params = new URLSearchParams();
 params.append('age1', 1);
 axios.post('url...', params).then(function(res){
 console.log(res.data);
 });
}

json格式：

module.exports = function(app){
 // 配置json
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({
  extended: true
 }));
};
adduser: function(){
 consot app = this;
 axios.post('接口',{
 name: 'dada',
 age: 1
 }).then(function(res){
  console.log(res.data);
 });
}

if(res.data.status){
 // 数据插入成功
 app.user.push(res.data.data);
}

跨域问题

什么是跨域问题，就是访问其他域中的资源会出现问题，而访问相同的域不会出现问题，如何解决这种问题，这个问题就叫做跨域问题。

使用的解决方法：

第一种是通过vue框架来配置跨域访问，第二种事通过服务器端，修改node程序来实现跨域问题。

在vue框架中的vue.config.js中，配置代理服务器。

module.exports = {
devServer: {
proxy: '域名'
}
};
// 代理服务器处理

created:function(){
const app = this;
axios.get('/users').then(res=>{
app.users=res.data.data;
});
}

设置多个跨域请求的代理，但是在生产环境中存在问题，还是会有跨域问题。

module.exports = {
devServer: {
// 多个代理请求
proxy: {
 "/api":{
  target: 'http://...',
  pathRewrite:{
   "^/api":
  }
 }
}};

created: function(){
const app = this;
axios.get('api/users').then(res=>{
app.users=res.data.data;
});
}

服务器端支持跨域访问

express服务器端，开启cors，跨域资源共享，开启前，要安装cors跨域支持模块，引入const cors = require('cors')。

然后添加中间件：app.use(cors())即可。