Use axios to encapsulate the fetch method and call-JS Tutorial-php.cn

Use axios to encapsulate the fetch method and call

亚连

Release： 2018-06-07 16:28:03

Original

2041 people have browsed it

Below I will share with you an example of encapsulating the fetch method and calling it based on axios. It has a good reference value and I hope it will be helpful to everyone.

For basic axios usage, please see the axios official website

//依赖于axios对私有ajax进行修改
import Qs from &#39;qs&#39;
import axios from &#39;axios&#39;
import router from &#39;router/index&#39;
import {errorPrompt, loading, closeLoading} from &#39;util/util&#39;
export const status = {
 SUCCESS: &#39;100&#39;,
 NET_ERR: &#39;101&#39;, // 网络连接异常，请稍候再试
 BIZ_ERR: &#39;103&#39;, // 业务请求异常
 NO_AUTH: &#39;104&#39;
}
export function fetch(options) {
 return new Promise((resolve, reject) => {
 let instance = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 2000,
  headers: {
  // "tracecode": window.encodeURIComponent(JSON.stringify({"ua":"","cv":"20161230","token":"3dwo0onUUsPKVJcP8tk","os":"windows10","app":"kind","ws":"1*1","pkey":"f8caf7d7-a5d4-4710-b06f-28a922b6a467"}))
  "tracecode": commonBizHeader(isManager(options)),
  &#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39;
  },
  transformRequest: [function (data) {
  // Do whatever you want to transform the data
  let ret = &#39;&#39;
  for (let it in data) {
   ret += encodeURIComponent(it) + &#39;=&#39; + encodeURIComponent(data[it]) + &#39;&&#39;
  }
  return ret
  }]
 });
 instance.interceptors.request.use(function (response) {
  // 请求拦截
  loading();
  return response;
 }, function (error) {
  console.log(&#39;error 请求拦截 : &#39;, error)
  return Promise.reject(error);
 });
 instance(options)
  .then(response => {
   const res = response.data;
   if (res.errorCode != status.SUCCESS) {
   switch (res.errorCode) {
    case status.NET_ERR: {
    errorPrompt(res.errorMsg)
    reject(res)
    break;
    }
    case status.BIZ_ERR: {
    errorPrompt(res.errorMsg)
    reject(res)
    break;
    }
    case status.NO_AUTH: {
    errorPrompt(res.errorMsg)
    let session = require("storejs")
    if (isManager(options)) { // 管理端
     session.remove("managerUserToken")
     router.push({path: &#39;/manager/login&#39;})
    } else {
     session.remove("clientUserToken")
     router.push({path: &#39;/client/login&#39;})
    }
    reject(res)
    break
    }
   }
   }
   closeLoading();
   resolve(res);
  }).catch(error => {
   closeLoading();
   errorPrompt(&#39;网络连接错误，请检查您的网络&#39;)
   console.log(&#39;error&#39;, error); // for debug
   reject(error);
  });
 });
}
function commonBizHeader (isManager) {
 let session = require("storejs");
 let params = {}
 params[&#39;ua&#39;] = window.navigator.userAgent.toLowerCase()
 params[&#39;cv&#39;] = &#39;123456&#39;
 params[&#39;ws&#39;] = window.screen.height + &#39;*&#39; + window.screen.width
 params[&#39;token&#39;] = "123456"
 params[&#39;os&#39;] = window.navigator.appCodeName
 if (isManager) {
 params[&#39;token&#39;] = session.get(&#39;managerUserToken&#39;) // 管理 - 用户令牌
 } else {
 params[&#39;token&#39;] = session.get(&#39;clientUserToken&#39;) // 用户 - 用户令牌
 }
 params[&#39;app&#39;] = &#39;kind&#39;
 let UUID = session.get(&#39;pkey&#39;)
 if (!UUID) {
 UUID = getUUID()
 window.localStorage.setItem(&#39;pkey&#39;, UUID)
 }
 return encodeURIComponent(JSON.stringify(params))
}
function isManager(options) {
 return options && options.url && options.url.indexOf("/api/worker") != -1
}
/**
 * 获取UUID
 * @returns {string}
 */
export function getUUID() {
 let len = 32 // 32长度
 let radix = 16 // 16进制
 let chars = &#39;0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz&#39;.split(&#39;&#39;)
 let uuid = []
 let i
 radix = radix || chars.length
 if (len) {
 for (i = 0; i < len; i++) {
  uuid[i] = chars[0 | Math.random() * radix]
 }
 } else {
 var r
 uuid[8] = uuid[13] = uuid[18] = uuid[23] = &#39;-&#39;
 uuid[14] = &#39;4&#39;
 for (i = 0; i < 36; i++) {
  if (!uuid[i]) {
  r = 0 | Math.random() * 16
  uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
  }
 }
 }
 return uuid.join(&#39;&#39;).toLowerCase()
}

Copy after login

This is in the vue project: the calling method in the api is as follows (react has just started I am still doing a simple demo)

import {fetch} from &#39;api/fetch&#39;
export const callAuthCode = (userPhone) => {
 return fetch({
 url: &#39;/api/auth/code&#39;,
 method: &#39;post&#39;,
 data: ({
  userPhone: userPhone,
 }),
 })
}

Copy after login

Because our backend requires strict distinction between get/post requests, so the encapsulated method call must contain method. If the backend has been processed, all can be posted. request, you can refer to the axios official website and change all methods to .post

Description of the fetch method: It mainly encapsulates request interception and response interception. The default request body is converted from json format to form format. Of course, these They can all be found on the axios official website, but they are just collected. Please do not apply the request header part directly. This is a special configuration required by our backend. The three ends of the backend interface are shared and must be distinguished. Where is the call

I compiled the above for everyone. I hope it will be helpful to everyone in the future.

Concept and usage of command mode in JS (detailed tutorial)

How to implement callbacks using Promise in WeChat applet ?

The problem of failure to install Electron using npm

The above is the detailed content of Use axios to encapsulate the fetch method and call. For more information, please follow other related articles on the PHP Chinese website!