vue3.0 axios请求封装（vue2.0也适合）

àì夳堔傛蜴生んèń 2022-10-23 02:58 113阅读 0赞

**1.引入axios**

npm install axios

**2.src下面创建http文件夹(下图)**  
![在这里插入图片描述][20210318105533619.png]  
**api.js**

import axios from 'axios'
    var $http = axios.create({
        
        baseURL: 'https://wwww.baidu.com'//服务器地址
    });
    // 添加请求拦截器
    $http.interceptors.request.use(function (config) {
        
        // 在发送请求之前做些什么
        config.headers['Authorization'] = 'Bear ' + '123456'//按需求写入token
        return config;
    }, function (error) {
        
        // 对请求错误做些什么
        return Promise.reject(error);
    });
    
    // 添加响应拦截器
    $http.interceptors.response.use(function (response) {
        
        // 对响应数据做点什么
        let data = response.data
        return data;
    }, function (error) {
        
        // 对响应错误做点什么
        return Promise.reject(error);
    });
    
    export default $http

**index.js**

import axios from './api'
    let api = {
        }
    // 登陆
    api.login = function (data) {
        
        return axios({
        
            url: '/login',
            method: 'POST',
            data: data
        })
    }
    export default api

**页面引用**

import api from '@/http/index.js';

**setup中调用**

let login = () => {
        
          let data = {
        
            username: '小三',
            password: '123456789'
          };
          api.login(data).then((res) => {
        
            if (res.error_code === 'Success') {
        
              console.log(res.data);
            }
          });
        };
         return {
        
           login
        };

[20210318105533619.png]: /images/20221022/7f12e59852f24722a7dad17b71d47cb0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中统一封装Axios请求

1.Axios 是什么，为什么要统一封装？ axios是一个基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如统一进行拦截请...

亦凉/ 2024年04月17日 06:29/ 0 赞/ 105 阅读

相关 vue-封装axios请求

最近接手新的vue项目，发现axios竟然没有封装，立马动手封装，这里记录一下完整的封装过程，废话不说，直接上代码 baseConfig.js文件 //存放各个服

超、凢脫俗/ 2023年07月25日 08:43/ 0 赞/ 38 阅读

相关 Vue项目 axios请求封装+接口封装

前言：接口进行封装，方便后期维护 > 先封装axios ( utils => axios.js ) import axios from "axios" i

我会带着你远行/ 2023年01月18日 04:08/ 0 赞/ 317 阅读

相关 vue axios请求封装

axios.defaults.baseURL = 'http://172.16.26.133:8080/XCPS'; //填写域名 //http request

红太狼/ 2023年01月03日 14:17/ 0 赞/ 284 阅读

相关 vue 封装axios 请求

[https://www.cnblogs.com/ldlx-mars/p/7908950.html][https_www.cnblogs.com_ldlx-mars_p_790

╰半橙微兮°/ 2022年12月25日 15:51/ 0 赞/ 249 阅读

相关 Vue axios http请求封装

转载： [https://mp.weixin.qq.com/s/VR0lXinHwPSBmS6uapji2Q][https_mp.weixin.qq.com_s_VR0lXi

àì夳堔傛蜴生んèń/ 2022年12月16日 10:59/ 0 赞/ 235 阅读

相关 vue3.0 axios请求封装（vue2.0也适合）

1.引入axios npm install axios 2.src下面创建http文件夹(下图) ![在这里插入图片描述][20210318105533619.

àì夳堔傛蜴生んèń/ 2022年10月23日 02:58/ 0 赞/ 114 阅读

相关 Axios - 基于 Vue + Element 请求封装

前言 > 当然，其他 `React` 或 `UI` 框架可作为参考。本文基于 `Axios` 请求库，封装全局能通过 `this（挂载到Vue实例上）` 全局调用的请

╰+攻爆jí腚メ/ 2022年10月16日 01:55/ 0 赞/ 341 阅读

相关 vue + axios---封装一个http请求

在使用vue开发时，官方推荐使用axios来请求接口 [如何实现一个axios HTTP请求库][axios HTTP] // axios官方地址 h

Myth丶恋晨/ 2022年04月08日 11:19/ 0 赞/ 385 阅读

相关 Vue+iView LoadingBar封装Axios请求

import Axios from 'axios' import qs from 'qs' import iView from 'iview'

痛定思痛。/ 2022年01月31日 20:01/ 0 赞/ 440 阅读