vue中axios的几种封装技巧

李大将军QN

已于 2022-03-22 13:43:22 修改

阅读量3k

点赞数 3

分类专栏： vue前端axios请求封装文章标签： vue.js 前端框架 ajax 前端

于 2022-03-22 11:32:53 首次发布

本文链接：https://blog.csdn.net/weixin_51444162/article/details/123652733

版权

1.通过原型prototype给全局一个axios

在src/main.js文件内引入axios,全局vue绑定一个$http指向axios

import axios from 'axios'

Vue.prototype.$http=axios

封装好处：全局使用$http代替axios,不用每次都import引入axios文件

等级：青铜

星级：❤❤

2.通过封装axios，请求拦截器，请求地址

在src下新建文件夹config/url.js 用于储存请求地址的链接url

以电影网站为例：

//正在热映电影链接  注意后面的动态地址pageNum拼接接口
export const nowplayinglist=
'https://xxxx.com/xxxx?cityId=440300&pageSize=10&type=1&k=9428315&pageNum=';
//即将上映电影链接  注意后面的动态地址pageNum拼接接口
export const commingsoonlist=
"https://xxxx.com/xxxx?cityId=310100&pageSize=10&type=2&k=1915069&pageNum=";
//详情页面电影的信息地址
export const detalislist=
"https://xxxx.com/xxxx?k=3633812&filmId=";
//城市id 的电影院信息地址
export const cinemalist = 
"https://xxxx.com/xxxx?ticketFlag=1&k=8975302&cityId=";
//所有有电影院的城市列表信息地址
export const citylist =
"https://xxxx.com/xxxx?k=3233761";
//登录页面访问axios的信息地址
export const loginUrl =
 "http://xxxx:3000/login";

2.对axios进行封装请求拦截器在src创建文件api/http.js

import axios from 'axios'
//请求拦截器设置 两个参数 (成功时执行第一个参数config.headers{}代表请求拦截器的配置，失败时执行第二个) 
axios.interceptors.request.use(
    function(config){
        let host = ''
        let info = config.headers.info
        if(info=='info'){
            host='mall.film-ticket.film.info'
        }else if (info == "cinema") {
            // 影院列表
            host = "xxx.cinema.list";
            //所有城市的数据
        } else if