基础 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 方法及调用实例就是小编分享给大家的全部内容了, 希望能给大家一个参考, 也希望大家多多支持脚本之家
来源: http://www.jb51.net/article/134419.htm