Vue學習筆記 —— axios

什麼是axios？

axios 是一個基於 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。主要用來實現ajax與後端伺服器的資料互動。

axios具有有以下特徵：

• 從瀏覽器中建立 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求和響應資料
• 取消請求
• 自動轉換JSON資料
• 客戶端支援防止 CSRF/XSRF

安裝

$ npm install axios
$ cnpm install axios //taobao源
$ bower install axios
// 或者使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

傳送GET請求

// created:vue生命週期中的鉤子函式，在這個時間點，data中的資料已經注入到響應式系統中
created(){
    axios.get('api/getData.php',{       // 還可以直接把引數拼接在url後邊
        params:{
            title:'眼鏡'
        }
    }).then(function(res){
        this.goodsList = res.data;
    }).catch(function (error) {
        console.log(error);
    });
}

傳送POST請求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

補充：如果傳送請求時，傳遞的引數是物件，那麼可用如下方式傳引數

var params = new URLSearchParams();
params.append('title', '眼鏡');
params.append('id',1);
axios.post('/user', params)
      .then(function(res){})
      .catch(function(error){});

執行多個併發請求

//獲得使用者資訊的請求
function getUserAccount() {
     return axios.get('/user/12345');
}
 
//獲取使用者許可證的請求
function getUserPermissions() {
     return axios.get('/user/12345/permissions');
}
 
axios.all( [ getUserAccount(),  getUserPermissions() ] )
    .then(axios.spread(function (acct, perms) {
        //兩個請求現已完成
    })
);

請求攔截器

//請求攔截器
axios.interceptors.request.use(
  function (config) {
      // 在傳送請求之前做些什麼
      return config;
  },
  function (error) {
      // 對請求錯誤做些什麼
      return Promise.reject(error);
  }
);

響應攔截器

//響應攔截器
axios.interceptors.response.use(
  function (config) {
      // 對響應資料做點什麼
      return config;
  },
  function (error) {
      // 對響應錯誤做點什麼
      return Promise.reject(error);
  }
);

Vue中axios在傳送POST請求時，引數的處理

//使用axios.create建立一個新的axios例項，統一對資料進行處理, 同時也藉助qs模組
const Axios = axios.create({
  baseURL: '/api',
  transformRequest: [function (data) {
    const d = qs.stringify(data)
    return d;
  }]
})

Axios.post("/checkLogin.php", {
  name, pwd
});

封裝

import axios from 'axios'
import qs from 'qs'

axios.defaults.timeout = 5000;                        //響應時間
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置請求頭
axios.defaults.baseURL = '';   //配置介面地址

//POST傳參序列化(新增請求攔截器)
axios.interceptors.request.use((config) => {
    //在傳送請求之前做某件事
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{
    console.log('錯誤的傳參')
    return Promise.reject(error);
});

//返回狀態判斷(新增響應攔截器)
axios.interceptors.response.use((res) =>{
    //對響應資料做些事
    if(!res.data.success){
        return Promise.resolve(res);
    }
    return res;
}, (error) => {
    console.log('網路異常')
    return Promise.reject(error);
});

//返回一個Promise(傳送post請求)
export function fetchPost(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(response => {
                resolve(response);
            }, err => {
                reject(err);
            })
            .catch((error) => {
                reject(error)
            })
    })
}
//返回一個Promise(傳送get請求) 
export function fetchGet(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
            .then(response => {
                resolve(response)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                reject(error)
            })
    })
}
export default {
    fetchPost,
    fetchGet,
}