当前位置:首页 > 前端开发 > vue + axios---封装一个http请求

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

6个月前 (05-27)58

在使用vue开发时,官方推荐使用axios来请求接口


//    axios官方地址
https://github.com/axios/axios

但是axios并不像 vue-resource 一样拥有install,即不能直接 Vue.use(axios) 来使用,所以需要我们自己根据axios来写一个具有install方法的Http库。

1.安装axios


npm install axios

2.创建Http.js文件


import axios from 'axios'

export default {
    install (Vue) {
    //    install方法,向Vue实例中添加一个$http方法
        Vue.prototype.$http = axios
        Vue.$http = axios
    },
    $http: axios
}

export const Http = axios

3.引用


import Vue from 'vue'
import Http from './Http'

Vue.use(http)

如此,就可以在vue中直接使用axios了

4.axios拦截器
在开发过程中,会需要设置一些请求头,公共参数等,或者需要对请求结果进行统一处理(例如错误处理),这时候就可以用到axios拦截器

创建interceptor.js文件


import axios from 'axios'

let interceptor = ''
export const myInterceptor = interceptor

//    设置请求拦截器
export const setInterceptor = function (response) {
    axios.interceptors.request.use((config) => {
        config.headers.Authorization = token    //设置请求头Authorization
        config.headers.Accept = 'application/json'    //设置请求头Accept 
       /*
           具体配置需要根据实际开发情况来配置
       */
        return config
    })
}
//    移除请求拦截器
export const clearInterceptor = function () {
  axios.interceptors.request.eject(myInterceptor)
}

ps:上例只示范了axios的请求拦截,回复拦截时同样的处理方式
ps:在interceptor中暴露myInterceptor、setInterceptor与clearInterceptor 的原因是方便随时取消与设置

5.设置axios默认请求地址


axios.defaults.baseURL = 'http://172.0.0.1'

虽说几乎都是使用webpack代理的方式来配置请求地址,但此方式依然有时会用到

原文地址:https://segmentfault.com/a/1190000017352304

作者:sfornt
来源链接:https://www.cnblogs.com/lalalagq/p/10114421.html

标签: Axios

“vue + axios---封装一个http请求” 的相关文章

爬坑日记 1.axios请求参数为数组时报错

在请求接口的时候,要传递的参数为一个数组。但是其真实传递的却不是一个数组,例如: 传递的参数数组为 userId = [0,1,2] 但真实的请求头的参数是,它会在变量名的后面加个[]:...

原创:【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】

原创:【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】

如标题:我想在ajax的header头增加自定义Token进行跨域api认证并调用,api使用laravel5编写,如何实现? 首先,了解下CORS简单请求和复杂请求。   ...

axios封装

1.封装axios 1.1创建src/http文件夹   用来放网络请求相关的文件 1.2 src/http/index.js  文件夹下, 创建 index.j...

vue-axios

安装依赖 npm i axios 在main.js文件中声明 import axios from 'axios' Vue.prototyp...

axios 响应数据为空

axios 响应数据为空

背景 在使用 axios 请求一个网站的时候发现 response.data 为空,且响应头内容也不是常见的响应头 而在浏览器上去访问是正常的 且使用 postma...

React中利用axios来实现数据请求

React中利用axios来实现数据请求

  axios是基于Promise来封装的,通常我们会用axios在数据请求这块作如下配置: 一、拦截器 有注释,不难理解,通常请求头参数不是写死的,...

axios封装:

网络请求包含 请求航 请求头,请求体, axios默认发送的数据时json格式 //发起get请求 axios.get...

vue axios封装以及API统一管理

vue axios封装以及API统一管理

在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中。当项目越来越大的时候,接口的请求也会越来越...

前端Axios-Day44

JSON Server:模拟服务器环境插件 1.进行全局安装:npm i -g json-server 2.创建db.json文件并写入相关数据: { "...