Vue封装Axios & api管理

Posted 2021-09-14 未飞

前言：

你连Axios是什么干什么用的都不知道,那么你去封装它有意义吗？  

  既然要封装Axios,先了解Axios(没有时间的直接向下划!)

  axios介绍(W3C)：

        axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR(XmlHttpRequest)的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点： 

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

axios优点：

        1.支持node端和浏览器端

                同样的API，node和浏览器全支持，平台切换无压力

        2.支持 Promise

                使用Promise管理异步，告别传统callback方式

        3.丰富的配置项

                支持拦截器等高级配置

        4.社区支持

                axios相关的npm包数量一直在增长

axios缺点：

        1、对搜索引擎不友好

        2、要实现Ajax下的前后退功能成本较大

        3、跨域问题限制

为什么对Axios进行二次封装？

        如果项目比较小你直接使用也没什么，但是现在我们项目越写越大，越写越多 如果这时候还要直接使用的话 那如果后期 后台改了一个接口或者改了一个参数什么的呢？你是不是还要在很多的页面里去找到当前页再进行修改，这个过程太过繁琐，不利于项目的维护和迭代.

        这时统一的区间管理接口,需要修改某一个接口的时候直接在 api 里修改对应的请求是不是很方便，也就是说你需要修改参数或者路径直接去 api 里修改就好了，就不需要再去一大堆页面里找了。

上面对Axios做一个简单的了解

---

进入正题封装Axios：

在根目录下新建一个文件夹，在当前文件夹下新建文件 request.js 文件

在 request.js 文件中主要做了三件事：

1、对axios的基本设置

2、请求拦截器

3、相应拦截器

import axios from 'axios' //首先引入axios
import { Toast } from 'vant'

// create an axios instance  创建axios实例
const service = axios.create({
    baseURL: "基地址", // url = base api url + request url
    withCredentials: true, // 是否携带 cookies 
    timeout: 5000 // 请求超时时间
})

// request请求拦截器 request interceptor
service.interceptors.request.use(
        config => {
            //vant 轻提示
            Toast.loading({
               message: '加载中...',
               forbidClick: true,
               forbidClick: true
            })
            return Promise.resolve(config) 
        },
        error => {
            // do something with request error
            console.log(error) // for debug
            return Promise.reject(error)
        }
    )

    // respone响应拦截器
service.interceptors.response.use(
    response => {
        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)
    }
)
// 最后抛出axios实例 
export default service

封装请求地址

同文件夹新建 api.js

在 api.js 中写一些地址

const api = {
  Login: '/user/login',
  UserInfo: '/user/userinfo',
  UserName: '/user/name'
}

export default api

封装请求方法

封装好后   在同文件夹下 新建文件user.js

在user.js中将封装好的Axios导入 ,数据请求就在user.js中进行

//请求地址
import api from './api'
// axios
import request from './request'

// 登录
export function login(data) {
  return request({
    url: api.Login,
    method: 'post',
    data
  })
}

// 用户信息 post 方法
export function getUserInfo(data) {
  return request({
    url: api.UserInfo,
    method: 'post',
    data,
    hideloading: true
  })
}

// 用户名称 get 方法
export function getUserName(params) {
  return request({
    url: api.UserName,
    method: 'get',
    params,
    hideloading: true
  })
}

使用请求方法

因为使用的是  export 导出的请求方法，所以我们使用时 只需要将方法名导入即可

//可以导入多方法
import { nav,appIndex } from "@/http/api"
export default {
  data(){
    return{
      banner_list:[],
      nav_list:[]
    }
  },
  created(){
    this.getbanner();
  },
  methods:{
    async getbanner(){
      const { data:res } = await nav();
      this.banner_list= res
    },
    async getappIndex(){
      const { data:res } = await appIndex();
      this.nav_list = res
      console.log(res);
     }
  }
}

---

持续更新中  点关注   不迷路！！！