axios

axios用于向后台发起请求的

1. 依赖安装指令：npm install --save axios vue-axios

如果下载失败可以将版本放入package.jsom中dependencies对象中，再到命令窗口执行npm i补全依赖即可。

2.在main.js文件中引入和挂载

import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios)

$是在Vue 所有实例中都可用的属性的一个简单约定。这样做会避免与已被定义的数据、方法、计算属性产生冲突。

import axios from 'axios'
Vue.prototype.$axios = axios // 在vue原型对象上添加属性名$axios，属性值为axios
//通过 this.$axios可调用axios

3.axions请求响应拦截

//创建instance.js文件夹
import axios from 'axios' 
import { post } from "@/api/request";
import { Message } from 'element-ui';

const instance= axios.create({
   // baseURL: 'https://api/*****',  // 地址
   timeout: 3000, //请求超时
})

// 请求拦截
instance.interceptors.request.use(
   config => {
      config.headers.Authorization = sessionStorage.getItem('token') || '';
      //config.headers.clientType = 'WEB'
      return config
   },
   error => {
      return Promise.reject(error)
   }
)

// 响应拦截
instance.interceptors.response.use(
   response => {
      let res = response.data
      return Promise.resolve(res)
   },
   error => {
      let err = error.response
      Message({ message: err.data.message, type: 'error' }) // 弹窗提示
      if (err.status === 状态码) getRefreshToken() //重新请求获取刷新token
      return Promise.reject(err)
   }
)
// 获取刷新token
function getRefreshToken() {
   let Token = localStorage.getItem('token')
   if (Token) {
      const url = 请求路径
      const param = { }
      post(url, param).then(res => {
         sessionStorage.setItem('token', res.token)
         localStorage.setItem('token', res.token)
         location.reload() // 刷新整个页面
      }).catch(() => window.location = '/login')//如果请求不成功则跳回登录页面
   }
}
export default instance

4.对axios进行封装

a. get请求封装
axios.get(url,[,config])
axios.get(url,{ params, headers, responseType })

import instance from "@/api/instance";
/*
 * method  get/post请求
 * @url 请求地址
 * @param {}请求参数
 * @headers 设置请求头
 * @responseType 响应类型 // blob对象(文件流)
* */
export function get(url, params, headers, responseType) {
   return new Promise((resolve, reject) => {
      if (typeof url !== 'string' || params.constructor !== Object) {
         throw new Error('参数类型错误或为空值')
      }
      instance.get(url, { params, headers, responseType }).then(res => resolve(res))
         .catch(err => reject(err))
   })
}
export default { get }

b. post请求封装

axios.post(url[, data[, config]])
axios.post(url,params,{ headers: { Content-Type:"application/json;charset=UTF-8" } })

请求标头
content-type: application/x-www-form-urlencoded 常见的 POST 提交数据，浏览器的原生 form 表单
content-type: application/json;charset=UTF-8 用来告诉服务端消息主体是序列化后的 JSON 字符串
content-type: multipart/form-data 常见的 POST 数据提交的方式，使用表单上传文件时，比如图片视频等
Content-Type: text/xml

/*
 * method  post请求
 * @url 请求地址
 * @param {}请求参数
 * @headers 设置请求头
 * @responseType 响应类型 // blob对象(文件流)
* */
api post请求封装
import instancefrom "@/api/instance";
import qs from 'qs'

export function post(url, param, ...args) {
   return new Promise((resolve, reject) => {
      /* 做的数据判断 js数据类型检测--(typeof/constructor)的区别 以及 instanceof检测param是否为表单  */
      if (typeof url !== 'string' && param.constructor !== Object && !(param instanceof FormData)) {
         throw new Error(`参数类型错误:url->${url},param->${param}`)
      }

      /* args为请求第三个以上参数作为数组的形式
        array.every(function(currentValue,index,arr), thisValue)  检测数组所有元素是否都符合指定条件  */
      if (!args.every(item => item.constructor === String || item.constructor === Object)) {
         throw new Error(`参数类型错误:args->${args}`)
      }
      const config = { headers: {} }
      let params = qs.stringify(param) // 如果第二个参数为'json',转为qs.stringify格式
      args.forEach(item => {
         if (item.constructor === String) {
            /* 文件file */
            if (item.toLocaleLowerCase() === 'file') params = param, config['headers']['Content-Type'] = 'multipart/form-data'
            if (item.toLocaleLowerCase() === 'json') params = param
         }
         /* 如果需要设置请求头  第四个参数 {"Content-Type":"application/json; charset=UTF-8"} */
         if (item.constructor === Object ) for (let key in item) config['headers'][key] = item[key]
      })
      instance.post(url, params, config).then(res => resolve(res))
         .catch(err => reject(err))
   })
}
export default { post }

待续。。。