在專案中配置 axios

例如 Vue 、 React 都可這樣使用

1. 安裝依賴

npm i -S axios

2. 在src目錄下

1. 建立utils資料夾，建立request.js

   // 封裝axios
   import axios from "axios"
   import qs from "querystring"
   
   /**
    *  處理失敗的方法
    *  status：狀態碼
    *  info：資訊
    */
   const errorHandle = (status,info) =>{
       switch(status){
           case 400:
               console.log("客戶端發出的請求有語法錯誤");
               break;
           case 401:
               console.log("伺服器認證失敗");
               break;
           case 403:
               console.log("客戶端沒有許可權訪問資源");
               break;
           case 404:
               console.log("資源未被定義(網路請求地址錯誤/伺服器上找不到請求的資源)");
               break;
           case 500:
               console.log("伺服器執行請求時發生了錯誤");
               break;
           case 503:
               console.log("伺服器在忙或在停機維護");
               break;
           default:
               console.log(info);
               break;
       }
   }
   /**
    *  建立axios例項物件
    */
   const instance = axios.create({
       // 公共配置
       timeout:5000
   })
   /**
    *  處理攔截器
    */
   
   /**
    *  請求攔截
    */
   instance.interceptors.request.use(
       config =>{
           if(config.method === 'post'){
               config.data = qs.stringify(config.data);
           }
           // // 配置請求頭token資訊
           // if(store.state.loginModule.user.token){
           //     config.headers.authorization = store.state.loginModule.user.token
           // }
           return config
       },
       error => Promise.reject(error)
   )
   
   instance.interceptors.response.use(
       // 完成了
       response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response) ,
       error =>{
           const { response } = error;
           errorHandle(response.status,response.info);
       }
   )
   
   export default instance
    
   

2. 建立api資料夾，建立index.js

   //引入utils下的request.js
   import axios from "../utils/request.js"
   
   /**
    *  路徑地址
    */
   const base = {
       
   }
   
   /**
    *  請求方法
    */
   const api = {
       
   }
   
   export default api;
   

人生人山人海人來人往，自己自尊自愛自由自在。

本文來自部落格園，作者：青檸i，轉載請註明原文連結：https://www.cnblogs.com/fuct/p/15364218.html