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

Scliang 发布于2019-08-23 14:01 / 1160人阅读

摘要：在使用开发时，官方推荐使用来请求接口官方地址但是并不像一样拥有，即不能直接来使用，所以需要我们自己根据来写一个具有方法的库。

在使用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代理的方式来配置请求地址，但此方式依然有时会用到

GPU云服务器云服务器 http请求 js ajax 请求数据封装发送http请求 http接口请求

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99942.html

vue封装axios基本思路

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在vue项目之中使用axios是一个非常明智的选择，因为vue官方已经宣称不再维护vue-resource,并且推荐使用axios. 1 为什么选择axios？使用axios可以统一做请求-响应拦截，例如响应时我们将响应信息拦截起来，判断状态码，从而弹出报错信息设定请求超时,例如3000ms未响应...

microcosm1994 2019-08-26 12:10 评论0 收藏0
Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置

摘要：今天松哥就带大家来看看的使用。此时启动前端项目，就可以顺利发送网络请求了。松哥将自己封装的网络请求库已经放在上，欢迎大家参考。前端网络访问，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，网络访问较多的采用 vue-resources，Vue2.0 之后，官方不再建议使用 vue-resources ，这个项目本身也停止维护，目前建议使用的方案是 axios。今天松哥就带大...

Ku_Andrew 2019-05-23 11:48 评论0 收藏0
axios异步请求数据的简单使用

摘要：使用模拟好后端数据之后模拟数据的使用参考，就需要尝试请求加载数据了。数据请求选择了，现在都推荐使用。规定要发送到服务器的数据。布尔值，表示请求是否异步处理。要求为类型的参数，请求成功后调用的回调函数。在一个中重写回调函数的字符串。使用Mock模拟好后端数据之后（Mock模拟数据的使用参考：https://segmentfault.com/a/11...），就需要尝试请求加载数据了。数...

forsigner 2019-08-23 14:40 评论0 收藏0
vue axios 简单封装以及思考

摘要：先安装的详细介绍以及用法就不多说了请移步下面是简单的封装一个，在此说明这个方法呢是不一定需要的，根据个人的项目需求吧，也可以直接返回，交给后面另行处理也行。或者根据后端返回的状态，在里面进行处理也行。先安装 axios npm install axios axios的详细介绍以及用法就不多说了请移步 github ➡️ https://github.com/axios/axios ...

phoenixsky 2019-04-23 13:19 评论0 收藏0
从0到1使用VUE-CLI3开发实战（四）: Axios封装

摘要：从到使用开发实战四封装有很多同学看了本系列的前几篇之后建议我暂时先不用，于是小肆之后将把换成继续下面的文章。前置阅读用从到做一个完整功能手机站一从到开发实战手机站二提交规范配置从到使用开发实战三知识储备从0到1使用VUE-CLI3开发实战（四）: Axios封装有很多同学看了本系列的前几篇之后建议我暂时先不用TS，于是小肆之后将把TS换成JS继续下面的文章。今天给大家带来项目中非常...

ThinkSNS 2019-08-23 14:57 评论0 收藏0