axios入門篇

這是我參與8月更文挑戰的第3天，活動詳情查看：8月更文挑戰

1、axios簡介

Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。本質其實就是ajax請求。

2、axios功能特色

1. 在瀏覽器中發送XMLHttpRequests請求
2. 在node.js中發送http請求
3. 支持promise API
4. 攔截請求和響應
5. 轉換請求數據和響應數據
6. 批量發送多個請求
7. 取消請求
8. 自動轉換 JSON 數據
9. 客戶端支持防護 XSRF

對於這些功能特色的話，沒有必要去死記硬背，在後面的實踐中能夠慢慢體會到。

3、安裝

npm安裝：

npm install axios

cdn引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4、搭建環境

爲了更好的操做,咱們首先建立一個測試端口和數據。

1. 全局安裝json-server

npm install -g json-server

2. 建立一個db.json文件

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

複製代碼

3.運行json文件

json-server --watch db.json

4.打開網址,能夠對裏面數據進行請求

http://localhost:3000

5.而後建立一個基本的html文件，cdn引入axios,這裏我建立了幾個按鈕，方便對數據進行操做

<div>
        <button onclick="getData()">get</button>
        <button onclick="postData()">post</button>
        <button onclick="deleteData()">delete</button>
        <button onclick="putData()">put</button>
</div>
複製代碼

5、axios API

axios有兩種請求的方式，axios做爲函數執行發送請求，還有一種是調用方法。

axios(config)
axios(url[, config])

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
複製代碼

• 執行get請求：

//這裏都使用了兩種方法請求
function getData(){
    // axios.get('http://localhost:3000/posts?id=1').then(res=>{
    // console.log(res.data)
   // }).catch(err=>{
   // console.log(err.data)
   // })
    
    //沒有指定method時，默認方法爲get
    axios({
        url:"http://localhost:3000/posts",
        params:{
            id:1
        }
    }).then(res=>{
        console.log(res.data)
    })
}
複製代碼

• 執行post請求：

function postData(){
    // axios({
    // url:"http://localhost:3000/posts",
    // method:'post',
    // data:{
    // title: "json-server2",
    // author: "typicode2"
    // }
    // }).then(res=>{
    // console.log(res.data)
    // })

    axios.post('http://localhost:3000/posts',{"title": "json-server2","author": "typicode2"})
    .then(res=>{
            console.log(res.data)
    })
}
複製代碼

能夠在db.json文件中看到新增的數據

• 執行delete請求

//能夠指定默認路徑
axios.defaults.baseURL="http://localhost:3000"
function deleteData(){
    // axios({
    // url:"/posts/2",
    // method:"delete",

    // }).then(res=>{
    // console.log(res.data)
    // }).catch(err=>{
    // console.log(err)
    // })
    
    axios.delete('/posts/2').then(res=>{
        console.log(res.data)
    },err=>{
        console.log(err.data)
    })
}
複製代碼

其餘的方法能夠本身去測試，本身多寫掌握得也會更快。

6、設置默認值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
複製代碼

7、建立實例axios.create()

const instance=axios.create({
    baseURL:"http://localhost:3000",
    timeout:3000,		
})
function getData(){
    instance.get('/posts')
    .then(res=>{
        console.log(res.data)
    })
}
複製代碼

• 根據指定配置建立一個新的實例,對於每一個instance的話它均可以有本身獨立的配置
• instance其實是一個request函數，與axios本質相同，可是也有必定的區別，它沒有取消請求和批量發送請求的方法
• 應用場景：

需求：項目中有部分接口須要的配置與另外一部分接口須要的配置不太同樣

解決：建立兩個新的instance,每一個都有本身特有的配置，分別應用到不一樣要求的接口請求中

寫在後面

本篇文章主要是對一些axios的基本請求及實踐操做，下一篇會涉及到攔截器、取消請求及簡單的源碼分析。axios升級篇(碼住！)