如何封装前端api请求方法1.0

这一章节中 我们使用vue-cli3 来创建项目 官网文档(cli.vuejs.org/zh/)

创建好项目后先安装axios（这一次我们使用axios配合讲解这一章节）

 cnpm install axios --save-dev
复制代码

 "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-rc.12",
    "@vue/cli-plugin-eslint": "^3.0.0-rc.12",
    "@vue/cli-service": "^3.0.0-rc.12",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
复制代码

关于package.json 具体讲解 详情请见楼主具体章节

首先我们在src目录下建立api 文件夹

src
 ——api
   ——index.js  export 导出 api各种文件（注：export和 export default 有区别 详情请看楼主具体章节）
   ——http.js  这个js文件再一次的封装了axios，更方便的为整个项目服务（Axios 是一个基于 promise 的 HTTP 库）
   ——api.js 配置了与后台交互时候需要携带的静态属性如版本 version：v1 以及公用的路径basePath 等等 
 ——main.js
复制代码

import axios from 'axios'
import qs from 'qs'
我们需要定义前后端交互常见的几种方法
export const methods = {
  put: 'put',
  get: 'get',
  post: 'post',
  delete: 'delete'
}
const formData = data => {
  return qs.stringify(data, { indices: false })
}
自定义axios配置 具体参数可以参考网上中文文档
const instance = axios.create({
  timeout: process.env.NODE_ENV === 'production' ? 15000 : 600000
})
export const request = ({ method = methods.get, url, data, headers, token = true }) => {
  /**
   * 封装axios请求方法
   * @param url 请求地址 必传
   * @param method 请求方法 默认get请求
   * @param data 请求数据
   * @param headers 请求头
   * @param token  是否需要携带token
   */
  if (!url) {
    console.error(url, 'API function call requires uri argument')
    return
  }
  楼主项目使用localStorage作为前端缓存token方式  
  let tokenInfo = JSON.parse(window.localStorage.getItem('token')) || {}
  if (token && tokenInfo && tokenInfo.token) {
    window.location.href = '/login'
    return
  }
  headers = {
    ...headers,
    'accessToken': tokenInfo.token
  }
  // 默认是form表单传递数据 默认
  if (!headers['Content-Type']) {
    headers['Content-Type'] = 'application/x-www-form-urlencoded'
  }
  // 根据Content-Type 来决定 data 是否需要格式话
  if (headers['Content-Type'] === 'application/x-www-form-urlencoded' && (typeof data) !== 'string') {
    data = formData(data)
  }
  // 这里要注意吧indices 设置为false 因为前端在传form表单的数据的时候 如果数据里面有数组类型 qs库会吧数组索引转换成object 来发送给后端 这样后端是识别不了的
  if (method === 'get' || method === 'GET') {
    if (data) {
      if ((typeof data) !== 'string') {
        data = formData(data)
      }
      // 拼装get请求方法 判断请求参数是否存在
      url = url + '?' + data
    }
  }

  let req = instance({ method, url, data, headers })
  req.catch(error => {
    console.warn('[axios request]', error)
    window._vue.$Message.error('网络错误，请重试')
  })
  return req
}
function resetToken (config) {
  /**
   * 处理token
   * 如 登陆时 服务端会返回一个过期时间 在每次发送请求的时候 验证本地token是否过期了 如果是已经过期了 那么直接吧config中携带的token 替换掉
   * 如 即将过期 吧缓存中的token重新置换 以待下一次请求
   */
  return config
}
// axios 拦截器
instance.interceptors.request.use(function (config) {
  /**
   * 发送之前要做什么
   * 例如  token 是有时效的 在token过期之前需要重新请求服务端来兑换新的token
   */
  return resetToken(config)
  // return config
}, function (error) {
  /**
   * 请求错误 比如说网络失败啊 什么的
   */
  return Promise.reject(error)
})
// 响应错误
instance.interceptors.response.use(function (response) {
  /**
   * 对响应的数据处理 比如说 前后端中间层 当后端的给的数据 不能完全适配前端的时候 可以在这里加个中间层 在中间层 来处理数据 并且返回给前端
   */
  return response
}, function (error) {
  /**
   * 服务读响应错误
   * 可以写一些常用的处理逻辑 比如说 页面404啊 服务端500 服务器发布啊等常见的错误。(日后可以在这块来收集日志)
   * 以及一些loading处理
   */
  return Promise.reject(error)
})

复制代码

写的不好 多谅解！！！

转载于:https://juejin.im/post/5c4bc090e51d4503834d980f