axios封装和接口管理

1.为什么封装axios ？

答：axios 的 API 很友好，你完全可以很轻松地在项⽬中直接使⽤。 不过随着项⽬规模增⼤，如果每发起⼀次 HTTP 请求，就要把这些⽐如设置超时时间、设置请求头、根据项⽬环境判断使⽤哪个请求地址、错误处理等等操作，都需要写⼀遍 这种重复劳动不仅浪费时间，⽽且让代码变得冗余不堪，难以维护。为了提⾼我们的代码质量，我们应该在项⽬中⼆次封装⼀下 axios 再使⽤

2.如何封装 ？

封装的同时，你需要和 后端协商好⼀些约定，请求头，状态码，请求超时时间......

• 设置接⼝请求前缀：根据开发、测试、⽣产环境的不同，前缀需要加以区分
• 请求头 : 来实现⼀些具体的业务，必须携带⼀些参数才可以请求(例如：会员业务)
• 状态码: 根据接⼝返回的不同 status ， 来执⾏不同的业务，这块需要和后端约定好
• 请求⽅法：根据 get 、 post 等⽅法进⾏⼀个再次封装，使⽤起来更为⽅便
• 请求拦截器: 根据请求的请求头设定，来决定哪些请求可以访问
• 响应拦截器： 这块就是根据后端返回来的状态码判定执⾏不同业务

3.Axios 封装及接口管理

在src目录中创建utils/request.js 封装 axios ,开发者需要根据后台接口做修改。

•  service.interceptors.request.use 里可以设置请求头，比如设置 token
• service.interceptors.response.use 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录

//引入axios
import axios from 'axios'
// 引入vuex
import store from '@/store'
// 引入vant的加载动画
import { Toast } from 'vant'
// 根据环境不同引入不同api地址，需要配置后使用
import { baseUrl } from '@/config'
// 引入进度条动画（需要下载 npm i --save nprogress 依赖）
import Nprogress from 'nprogress' 
// 引入进度条的样式表
import "nprogress/nprogress.css"
// 创建一个axios
const service = axios.create({
  baseURL: baseUrl, // 配置axios基地址
  //withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
// request 拦截器 request interceptor
service.interceptors.request.use(
  config => {
	// 在 response 拦截器中， 展示进度条 Nprogress.start()
	Nprogress.start()
    // 不传递默认开启loading
    if (!config.hideloading) {
      // loading
      Toast.loading({
        forbidClick: true
      })
    }
    if (store.state.token) {
      config.headers['Authorization'] = store.state.token
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// respone拦截器
service.interceptors.response.use(
  response => {
	  // 在 response 拦截器中， 隐藏进度条 Nprogress.done()
	  Nprogress.done()
	  //清除loading
    Toast.clear()
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登录超时,重新登录
      if (res.status === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    Toast.clear()
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default service

4.接口管理

在utils/api.js 文件夹下统一管理接口

//将封装的axios引入到接口管理页
import service from './request.js'
//获取短信验证码接口
export function smsCode(arg) {
	return service({
		// url：会拼接与封装aixos的基地址
		url: "/smsCode",
		// data：要传递的请求参数
		data: arg,
		// 请求方法
		method: "post"
	})
}

5.如何调用

在vue要使用的组件中引入

//引入要使用的接口
import { smsCode,login } from '@/utils/api.js'
	export default {
		data() {
			return {
				form:{
					password:"",
					tel:"",
				},
				timer:"",
				statu:""
			}
		},
		methods: {
		    async login(){
				if(this.form.code=="" && this.form.tel==""){
					this.$toast.fail('手机号或者验证码不能为空')
					return false
				}
				var a=await login({
                    //请求参数
					mobile:this.form.tel,
					type:1,
					client:"1",
					password:this.form.password
				})
				console.log(a)
			},
       }