首页 > 编程 > JavaScript > 正文

基于axios封装fetch方法及调用实例

2019-11-19 14:24:45
字体:
来源:转载
供稿:网友

基础axios用法请看axios官网

//依赖于axios对私有ajax进行修改import Qs from 'qs'import axios from 'axios'import router from 'router/index'import {errorPrompt, loading, closeLoading} from 'util/util'export const status = { SUCCESS: '100', NET_ERR: '101', // 网络连接异常,请稍候再试 BIZ_ERR: '103', // 业务请求异常 NO_AUTH: '104'}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)),  'Content-Type': 'application/x-www-form-urlencoded'  },  transformRequest: [function (data) {  // Do whatever you want to transform the data  let ret = ''  for (let it in data) {   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'  }  return ret  }] }); instance.interceptors.request.use(function (response) {  // 请求拦截  loading();  return response; }, function (error) {  console.log('error 请求拦截 : ', 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: '/manager/login'})    } else {     session.remove("clientUserToken")     router.push({path: '/client/login'})    }    reject(res)    break    }   }   }   closeLoading();   resolve(res);  }).catch(error => {   closeLoading();   errorPrompt('网络连接错误,请检查您的网络')   console.log('error', error); // for debug   reject(error);  }); });}function commonBizHeader (isManager) { let session = require("storejs"); let params = {} params['ua'] = window.navigator.userAgent.toLowerCase() params['cv'] = '123456' params['ws'] = window.screen.height + '*' + window.screen.width params['token'] = "123456" params['os'] = window.navigator.appCodeName if (isManager) { params['token'] = session.get('managerUserToken') // 管理 - 用户令牌 } else { params['token'] = session.get('clientUserToken') // 用户 - 用户令牌 } params['app'] = 'kind' let UUID = session.get('pkey') if (!UUID) { UUID = getUUID() window.localStorage.setItem('pkey', 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 = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('') 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] = '-' uuid[14] = '4' 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('').toLowerCase()}

这是在vue的项目中:在api中调用方法如下(react刚开始学,还在做简单demo)

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

因为我们这边的后台要求严格区分get/post请求,所以封装的方法调用中必须带有method,如后台已经处理好,全部可进行post请求,则可以参照axios官网里面将方法全部改为.post

关于fetch方法的说明:主要进行封装了请求拦截,响应拦截,默认请求体由json格式转换form格式,当然,这些都是在axios官网里可以找到的,不过是集合下了而已

关于请求头部分请不要直接套用,这是我们这边后台要求特殊配置的,后台接口三端共用,必须区分是哪里在调用

以上这篇基于axios封装fetch方法及调用实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表