axios 簡介

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端迫悠，它本身具有以下特征：

1. 從瀏覽器中創(chuàng)建 XMLHttpRequest
2. 從 node.js 發(fā)出 http 請求
3. 支持 Promise API
4. 攔截請求和響應(yīng)
5. 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
6. 取消請求
7. 自動轉(zhuǎn)換JSON數(shù)據(jù)
8. 客戶端支持防止 CSRF/XSRF

安裝

npm安裝

$ npm install axios --save

通過cdn引入

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

發(fā)送GET請求

// created:vue生命周期中的鉤子函數(shù)砾跃，在這個時間點，data中的數(shù)據(jù)已經(jīng)注入到響應(yīng)式系統(tǒng)中
created(){
    axios.get('api/getData.php',{       // 還可以直接把參數(shù)拼接在url后邊
        params:{
            title:'眼鏡'
        }
    }).then(function(res){
        this.goodsList = res.data;
    }).catch(function (error) {
        console.log(error);
    });
}

response.data才是真正返回的后臺數(shù)據(jù)

發(fā)送POST請求

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

// 注意: 如果發(fā)送請求時硫惕，發(fā)現(xiàn)傳遞的參數(shù)是對象璃哟，那么可用如下方式傳參數(shù)
// var params = new URLSearchParams();
// params.append('title', '眼鏡');
// params.append('id',1);
// axios.post('/user', params)
//      .then(function(res){})
//      .catch(function(error){});

response.data才是真正返回的后臺數(shù)據(jù)

執(zhí)行多個并發(fā)請求

//獲得用戶信息的請求
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) {
        //兩個請求現(xiàn)已完成
    })
);

請求攔截器和響應(yīng)攔截器

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

//響應(yīng)攔截器
axios.interceptors.response.use(
  function (config) {
      // 對響應(yīng)數(shù)據(jù)做點什么
      return config;
  },
  function (error) {
      // 對響應(yīng)錯誤做點什么
      return Promise.reject(error);
  }
);

Vue中axios在發(fā)送POST請求時，參數(shù)的處理

1. 下載安裝第三方模塊 qs -> npm install qs --save-dev

2. 處理方式

// 第一種: 直接在發(fā)送的時候亭枷，對數(shù)據(jù)進行qs.stringify處理
// 缺點: 如果項目大旷坦，有大量的請求需要發(fā)送掏熬，那么一個一個加會很麻煩
axios.post("/checkLogin.php", qs.stringify({
  name, pwd
}));

// 第二種: 使用axios.create創(chuàng)建一個新的axios實例，統(tǒng)一對數(shù)據(jù)進行處理, 同時也要借助qs模塊
const Axios = axios.create({
  baseURL: '/api',
  transformRequest: [function (data) {
    const d = qs.stringify(data)
    return d;
  }]
})

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