uniapp 開發(fā)微信小程序總結(jié)（二）axois 封裝

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：124

1、安裝 axois 和 axoisRetry 包

2、支持在請求發(fā)生錯誤時，重新發(fā)送請求（一次），主要用于處理 token 過期、請求超時的情況。token過期時，會在獲取新的token 后重新發(fā)送請求。

3、支持接口是否需要帶 token信息

4、請求失敗狀態(tài)嗎 401 時和非 200 會分別展示錯誤提示。

  1 import store from '../store/index.js'
  2 import axios from "axios";
  3 import axiosRetry from 'axios-retry';
  4 
  5 let request = axios.create({
  6   baseURL: process.env.NODE_ENV === 'development'?"https://test":"https:// release"
  7   headers: {
  8     "Content-Type": "application/json"
  9   },
 10   timeout:2000 
 11 });
 12 axiosRetry(request, {
 13   retries: 1,                       // 設(shè)置自動發(fā)送請求次數(shù)
 14   retryDelay: (retryCount) => {
 15     return retryCount * 2000;      // 重復(fù)請求延遲
 16   },
 17   shouldResetTimeout: true,       //  重置超時時間
 18   retryCondition: async (error) => {
 19     //true為打開自動發(fā)送請求，false為關(guān)閉自動發(fā)送請求
 20     if(error.message.includes("status code 401")){
 21         await store.dispatch("login/onGetUserInfo",{},{root:true});
 22         return true
 23     }else if (error.message.includes("timeout")) {
 24         return true;
 25     } else {
 26       return false;
 27     };
 28   }
 29 })
 30 request.interceptors.request.use(
 31   config => {
 32       try {
 33          uni.showNavigationBarLoading()
 34         const token = uni.getStorageSync('token');
 35         if(config.needAuth === false){
 36             config.headers.authorization = ""
 37         } else if (token) {
 38           // 判斷是否存在token，如果存在的話，則每個http header都加上token
 39           config.headers.authorization = token; //Authorization是登錄接口返回
 40         }
 41         config.headers.type = "user"; // type:user   是固定的
 42         return config;
 43         
 44       } catch (e) {
 45         uni.hideNavigationBarLoading()
 46           uni.showToast({
 47               title: '發(fā)生錯誤，請稍后重試',
 48               position: 'center',
 49               icon: 'none',
 50               duration: 2000
 51           })
 52       }
 53   },
 54   err => {
 55     uni.hideLoading()
 56     uni.hideNavigationBarLoading()
 57     return Promise.reject(err);
 58   }
 59 );
 60 // http response 攔截器
 61 request.interceptors.response.use(
 62   response => {
 63     //攔截響應(yīng)，做統(tǒng)一處理
 64     if(response.data.code != 200){
 65         uni.hideLoading()
 66         uni.showToast({
 67             title: response.data.msg,
 68             icon:"none",
 69             duration: 2000
 70         })
 71         if(process.env.NODE_ENV === 'development'){
 72             console.error(response.data.msg)
 73         }
 74     }
 75     uni.hideNavigationBarLoading()
 76     return response;
 77   },
 78   //接口錯誤狀態(tài)處理，也就是說無響應(yīng)時的處理
 79   error => {
 80     uni.hideLoading()
 81     uni.hideNavigationBarLoading()
 82     const {
 83       response: { status, errMsg: statusText, data: {message}}
 84     } = error;
 85     const token = uni.getStorageSync('token');
 86     if (status == 401&&token) {// 登錄過期處理
 87     uni.getSetting({
 88         success: async function(t) {
 89             if(!t.authSetting["scope.userInfo"]){
 90                 uni.clearStorageSync()
 91                 store.commit("login/CHANGELOGINSTATE",{loginState:false},{root:true})
 92                 if(!store.state.login.isShowLogin){
 93                     store.commit("login/GETLOGINPOPUP",{},{root:true})
 94                 }
 95                 uni.showToast({
 96                     title: '登錄已過期，請重新登錄',
 97                     icon: 'none',
 98                     duration: 2000 
 99                 })
100             }
101         }
102     })
103     }else{
104         uni.showToast({
105             title: `請求錯誤，請稍后重試`,
106             position: 'center',
107             icon: 'none',
108             duration: 2000
109         })
110         console.error(`請求錯誤${status||''}：${statusText||message||''}`)
111     }
112     return Promise.reject(error); // 返回接口返回的錯誤信息
113   }
114 );
115 //真機獲取  
116 axios.defaults.adapter = function (config) {  
117     return new Promise((resolve, reject) => {  
118         var settle = require('axios/lib/core/settle');  
119         var buildURL = require('axios/lib/helpers/buildURL');  
120         uni.request({  
121             method: config.method.toUpperCase(),  
122             url: buildURL(config.baseURL + config.url, config.params, config.paramsSerializer),  
123             header: config.headers,  
124             data: config.data,  
125             dataType: config.dataType,  
126             responseType: config.responseType,  
127             sslVerify: config.sslVerify,  
128             complete:function complete(response){  
129                 response = {  
130                   data: response.data,  
131                   status: response.statusCode,  
132                   errMsg: response.errMsg,  
133                   header: response.header,  
134                   config: config  
135                 };  
136 
137             settle(resolve, reject, response);  
138             }  
139         })  
140     })  
141 }
142 export default request;