axios的具體使用、跨域問題

前言：這幾天都在搞對接，突然對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