前言：这几天都在搞对接，突然对axios又有了新的了解。上一篇写axios只是基于一个框架来写，这次写来点实战的。axios还是很有趣的，如果不报错的话！

一、引入axios

在用每一个东西之前，总是要去引入它。具体怎么引入可以去看官方的文档，这里就不细说了。

在每个要使用axios的组件中记得去导入axios，如下：

import axios from 'axios';
import Qs from 'qs';

这里还引入了Qs，其实qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。有时使用axios请求数据传参时发现无法正常的获取数据，这可能是因为传递参数时没有将参数序列化。所以最好也导入一下qs。（qs的引入也要npm，具体可以看官方文档。）

二、使用axios

代码如下：

export default{
    
    
        name:'index',
        data(){
    
    
            return{
    
    
                name:'',
                age:'',
                height:'180'
            }
        },
        methods:{
    
    
            getdata(){
    
    
                console.log('函数执行了');
                axios({
    
    
                    url:`/API/aaa/bbb/ccc`, //后端的接口地址                    	
                    method:"get",//注意，这里没有s！！！
                    params:{
    
    
                        //这里是后端需要的字段，即传给后端的数据
                        //title,age是后端接口里的一个参数
                        age:'19'
                        title:'好好学习',
                        height:this.height  //this.age是本页面的数据
                    },
                    transformRequest:[
                        function(data){
    
    
                            data = qs.stringify(data);
                            return data;
                        },
                    ],
                    headers: {
    
    
                        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
                    },
                    dataType:"json",
                })
                .then((res) => {
    
    
                    console.log("连接成功");//这里打印出来是为了更直观的看到连接成功了
                    console.log(res); //res是后端返回来的数据，如果连接成功，则把res打印出来
                    this.name = res.data.datas.name, //这里进行传回数据的赋值
                    this.age = res.data.datas.age  //让本页的数据等于回传的数据
                })
                .catch(function(error){
    
    
                    console.log("连接失败");
                    console.log(error); //如果连接失败，则抛出错误的信息
                });
            }
        },
        created(){
    
    
            this.getdata(); //在methods中入的axios要在created中去挂载
        }
    }

注：这里使用的是get请求，所以传给后端时用的是params。如果使用的是post请求，那么传给后端时用的就是data。

即

axios({
    
    
    url:'',
    method:"post",
    data:{
    
    
        
    }
    ......
})

三、关于axios的其他问题

（1）写在哪？

axios既可以写在methods中（到时候要到created里去调用），也可以直接写在created里。

即

created(){
    
    
    axios({
    
    
        url:'',
        method:''
        ......
    })
}

（2）后端路径（传id时或者其他的东西）

假如后端的给的接口路径是

/API/aaa/bbb/{id}

那么到时候在url中不能直接照抄，不然id就会找不到。

要这样写：

axios({
    
    
    url:`API/aaa/bbb/${
      
      this.id}`,
    method:'get',
    params:{
    
    
        id:this.id, //这里的this.id即为本页的数据，要传给后端
    }
})

可以看到在url中使用了这个符号 ````，这是模板字符串的写法，这样才能识别出路径。

（3）跨域问题

配置代理：

在vue.config.js中写入

module.exports = {
    
    
    // //基本路径
    // publicPath:'./',
    // //输出文件目录
    // outputDir:'dist',
    // lintOnSave:true,
    // assetsDir:'static'
    
    publicPath: '/',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: true,
    productionSourceMap: false,
    devServer: {
    
    
        open: true,
        overlay: {
    
    
            warnings: false,
            errors: true
        },
        proxy: {
    
    
            '/API': {
    
    
                target: `后端接口前缀`,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
    
    
                '^/API': ''
                },
            },
            '/loginApi': {
    
    
                target: `后端接口前缀`,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
    
    
                '^/loginApi': ''
                },
            }
        }
    }
}

到时候写入url时，前缀就写上取得名了，即/API/…/…/。

在main.js中写入

非常重要！！！！！！！！！！

Vue.config.productionTip = false