我們首先可以創(chuàng)建一個(gè)文件夾，用cmd打開(kāi)當(dāng)前文件夾.
+初始化文件
yarn init -y
+安裝
yarn add axios

files.png

啟動(dòng)http-server的命令行.png

http-server的接口地址.png

接著我們就可以創(chuàng)建一個(gè)html文件來(lái)測(cè)試一下簡(jiǎn)單使用體驗(yàn)axios。

了解axios.png

當(dāng)引入如圖片的路徑時(shí)候，就有一個(gè)全局對(duì)象axios暴露了并且可以使用，當(dāng)我輸出這個(gè)對(duì)象時(shí)候就發(fā)現(xiàn)里面會(huì)有一系列方法

axios.png

這時(shí)候我們可以請(qǐng)求一個(gè)url地址，比如請(qǐng)求之前用http-server做的接口地址

<script src="node_modules/axios/dist/axios.js"></script>
<script>
   
   var url = 'http://localhost:3000/course';
   var p1=axios.get(url);//返回值是一個(gè)promise對(duì)象
    console.log(p1);
</script>

我們可以看到打印出來(lái)的p1結(jié)果

get請(qǐng)求返回后.png

我們也可以用一下里面的then()方法，參數(shù)一是成功的回調(diào)方法，參數(shù)二是失敗的回調(diào)。

<script>
   var url = 'http://localhost:3000/course';
   var p1=axios.get(url);//返回值是一個(gè)promise對(duì)象
    // console.log(p1);
    p1.then((response)=>{
        console.log(response);
    },(error)=>{
        console.log(error);
    })
</script>

可以看到輸出結(jié)果為

結(jié)果.png

 p1.then((response)=> {

        // config: 配置信息，增加當(dāng)前url請(qǐng)求的配置項(xiàng)，里面包含了請(qǐng)求的url地址，以及一些其他的參數(shù)
        // data: 代表服務(wù)器的響應(yīng)
        // headers: 響應(yīng)頭信息
        // request: 當(dāng)前的ajax實(shí)例對(duì)象
        // status: 響應(yīng)狀態(tài)碼
        // statusText: 響應(yīng)文本描述
        if( response.status === 200 ){
            // 網(wǎng)絡(luò)請(qǐng)求成功，并不意味數(shù)據(jù)請(qǐng)求成功（得看接口的提供方，是否正常的返回?cái)?shù)據(jù)）
            // {error_code: 0, reason: '成功返回', result: []}
            console.log(response.data);

        }
        //
    }, (error) => {
        console.log(error);
    })

除此之外，還能做post請(qǐng)求

我們post測(cè)試都是用postman做的，請(qǐng)求頭不一樣，這個(gè)axios是請(qǐng)求頭默認(rèn)

post的請(qǐng)求頭.png

，所以post請(qǐng)求我們要設(shè)置一下請(qǐng)求頭

 var url = 'http://localhost:3001/api/v1/member/register';

    var data = {'username': 'lixiaoming', 'password': 'admin88'};
    // post提交的數(shù)據(jù) 需要注意一下編碼的格式，設(shè)置一下請(qǐng)求頭,使這個(gè)和postman一致
（x-www-form-urlencoded）

    var p1 = axios.post(
        url,
        'username=lixiing&password=admin88',
        // qs.stringify() JSON.stringify();
        {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
    );

這里的data應(yīng)該是個(gè)key value的鍵值對(duì)，這里我用'username=lixiing&password=admin88'的形式傳過(guò)去也太不方便了，我們有專(zhuān)門(mén)序列化的包qs，可以進(jìn)入項(xiàng)目文件夾里cmd 輸入命令行 yarn add qs

qs把keyvalue轉(zhuǎn)為json格式.png

把json轉(zhuǎn)為字符串格式.png