【Axios】封装一个常用axios

这是我参与更文挑战的第2天，活动详情查看： 更文挑战

什么是 axios？

首先需要知道：axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，

axios 他有哪些特性？

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

开始使用

使用 npm安装:

$ npm install axios

使用 bower安装:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

封装Axios

1、设置baseURl，创建config.js文件

export const baseUrl = location.protocol + '//localhost'  //项目域名
const environment = process.env.NODE_ENV === 'production' ? 'pro' : 'dev' //dev开发环境  pro 生产环境
let exports = {}
// 开发环境
if(environment === 'dev'){
  exports = {
    proxyBaseUrl:'/api',
    fyBaseUrl:'/apis' //防疫接口
  }
// 线上环境
}else if(environment === 'pro'){
  exports = {
    // 项目使用到多个域名，可以进行多个入口配置
    proxyBaseUrl:location.protocol + '//localhost', // 应用1
    fyBaseUrl:location.protocol + '//localhost' //应用2
  }
}
export default exports

2、创建service.js

配置axios,全局设置请求信息和错误信息处理

import axios from 'axios'
import router from './../router' 
const showStatus = (status) => {
  let message = ''
  switch (status) {
    case 400:
      message = '请求错误(400)'
      break
    case 401:
      message = '未授权，请重新登录(401)'
      break
    case 402:
      message = '拒绝访问(402)'
      break
    case 404:
      message = '请求出错(404)'
      break
    case 408:
      message = '请求超时(408)'
      break
    case 500:
      message = '服务器错误(500)'
      break
    case 501:
      message = '服务未实现(501)'
      break
    case 502:
      message = '网络错误(502)'
      break
    case 503:
      message = '服务不可用(503)'
      break
    case 504:
      message = '网络超时(504)'
      break
    case 505:
      message = 'HTTP版本不受支持(505)'
      break
    default:
      message = `连接出错(${status})!`
  }
  return `${message}，请检查网络或联系管理员！`
}

const service = axios.create({
  // 联调
  
  headers: {
    get: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    post: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
  },
  // 是否跨站点访问控制请求
  withCredentials: true,
  timeout: 30000,
  validateStatus() {
    // 使用async-await，处理reject情况较为繁琐，所以全部返回resolve，在业务代码中处理异常
    return true
  }
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  (err) => {
    err.message = '服务器异常，请联系管理员！'
    // 错误抛到业务代码
    return Promise.reject(err)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const status = response.status
    let msg = ''
    if (status < 200 || status >= 300 && status != 401 && status != 500) {
      // 处理http错误，抛到业务代码
      msg = showStatus(status)
      if (typeof response.data === 'string') {
        response.data = { msg }
      } else {
        response.data.msg = msg
      }
      return response
    }else if(status == 200){
      return response
    }else if(status == 500){
      msg = showStatus(status)
      response.data = {msg:msg}
      router.replace({name:'exception',query:{type:500}})
      return response 
    }
    
  },
  (err)=>{
    err.message =  '请求超时或服务器异常，请检查网络或联系管理员！'
    return Promise.reject(err)
  }
)

export default service

3、创建接口请求文件

不同区块的功能的数据，可以创建多个文件，便于区分和后期管理

import config from './config' // 基础路径
import service from './service' //封装的axios
/**
 * data 是post传参
 *
 */
export const Upload = (data)=> service({
  url: `${config.proxyBaseUrl}/user/upload`,
  method: 'POST',
  data: data,
  headers:{
   //这里可以单独设置headers
  },
})

4、实际组件中调用请求

import {Upload} from 你的请求文件地址

Upload(参数).then((res)=>{
  //返回的数据
})
.catch((err)=>{
  //错误信息
})