介绍

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

特性

它主要有如下特性:

浏览器端发起XMLHttpRequests请求

Node端发起http请求

支持Promise API

拦截请求和响应

转化请求和响应(数据)

取消请求

自动转化json数据

客户端支持抵御XSRF(跨站请求伪造)

安装

Vue项目中使用如下命令安装

npm install axios --save

使用

Axios拥有诸多配置项,由于项目中请求数量很多,因此考虑将其封装成公共API,api.js调用一个配置文件config.js

api.js

import axios from 'axios'
import config from './config.js' class API {
// POST
post(params) {
config.data = params.data
return axios.post(params.url,config.data,config)
}
// 此处可以封装其他方法
} export default API

config.js

export default {
method: 'post',
// 基础url前缀
baseURL: 'your request url',
// 请求头信息
headers: {
'Content-Type':'application/json;charset=UTF-8'
},
// 参数
data: {},
// 设置超时时间
timeout: 10000,
// 携带凭证
withCredentials: false,
// 返回数据类型
responseType: 'json'
}
getBrandsByHot:function () {
let params = {
url:'/company/list',
data:{
cond:{},
limit:9,
order_word: "attention_rate",
order_direction: -1,
page:1
}
}
api.post(params).then(response => {
this.hot_brand = response.data
}).catch({});
}

由于IE9不支持Promise,因此需要在项目入口main.js中打个补丁,否则无法发出请求

import 'babel-polyfill'

如上,已经能在IE9+上发起网络请求,但是IE9上有个问题:response.data为undefined,因此需要对返回的数据针对不同浏览器进行处理,在API.js中加入如下拦截器

// 响应拦截
axios.interceptors.response.use(function (response) {
var data
// IE9时response.data是undefined,因此需要使用response.request.responseText(Stringify后的字符串)
if(response.data == undefined){
data = response.request.responseText
} else{
data = response.data
}
// 判断data不是Object时,解析成Object
if(!(data instanceof Object)){
data = JSON.parse(data)
}
return data
}, function (error) {
return Promise.reject(error)
});

进阶使用

结合promise 统一请求进一步封装成vue插件 可实现登录、拦截、登出等功能,以及利用axios的http拦截器拦截请求和响应

api.js

export default function fetch (options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: SERVER_BASE_URL,
headers: {},
transformResponse: [function (data) {
}]
})
instance.interceptors.request.use(
config => {
return config
},
err => {
return Promise.reject(err)
}) instance.interceptors.response.use(
response => {
return response
},
error => {
return Promise.reject({code:1000}) // 返回接口返回的错误信息
}) //请求处理
instance(options)
.then((res) => {
resolve(res.data)
return false
})
.catch((error) => {
reject(error)
})
})
}

然后我们可以吧请求放到一个文件统一维护(相同的请求再也不用写多次了)

interface.js


const IS_GUEST = params => {
return fetch({
url: '/sys/role/getRoleIdByUserId',
method: 'get',
params: params
})
} const RESET_PASSWORD = params => {
return fetch({
url: '/person/resetPswByMobile',
method: 'get',
params: params
})
} export default apiList={
IS_GUEST,
RESET_PASSWORD
}

再来把封装的axio作为vue的插件使用

index.js

//导入模块
import apiList from './interface' const install = function(Vue) {
if (install.installed) return
install.installed = true
Object.defineProperties(Vue.prototype, {
$api: {
get() {
return apiList
}
}
})
} export default {
install
}

接下来我们vue中可以这样使用axios

main.js先注册插件

import api from './index'
Vue.use(api)

然后可以在任何文件愉快的使用起来 就像这样

this.$api.RESET_PASSWORD().then(res=>{
// ...
})

浅谈 Axios 在 Vue 项目中的使用的更多相关文章

  1. 浅谈 OneAPM 在 express 项目中的实践

    [编者按]OneAPM 运营团队,近日在 github 上发现了一篇文章,特别奉献给大家.本文作者王宇先生从2015年年初就开始使用我们的产品,也是OneAPM 的忠实用户. OneAPM 是一个优秀 ...

  2. axios在vue项目中的一种封装方法

    记录下之前领导封装的axios请求 npm install axios // 安装 单独写个文件配置axios,此处为request.js import axios from 'axios' //自定 ...

  3. vue项目中 axios 和Vue-axios的关系

    文章收集于:https://segmentfault.com/q/1010000010812113 在vue项目中,会经常看到如下代码:   今天看到有些项目是这样写的,就有点看不懂了.  ----解 ...

  4. 在vue项目中使用axios发送FormData

    这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的    使用 application/x-www-form-ur ...

  5. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  6. 在vue项目中的axios使用配置记录

    默认vue项目中已经安装axios,基于element-ui开发,主要记录配置的相关. axiosConfig.js import Vue from 'vue' import axios from ' ...

  7. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  8. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  9. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

随机推荐

  1. istio入门(00)istio的学习资源

    官网:https://istio.io/ 理论知识: http://www.uml.org.cn/wfw/201710131.asp 环境搭建: http://dockone.io/article/2 ...

  2. jenkins创建multibranch pipeline

    参考以下文章进行实践: https://jenkins.io/doc/pipeline/tour/hello-world/#what-is-a-jenkins-pipeline (看见一个介绍的还不错 ...

  3. Python/模块与包之模块

    Python/模块与包之模块 1.什么是模块? 模块就是py文件 2.为什么要用模块? 如果在解释器上进行编码,把解释器关闭之前写的文件就不存在了,如果使用模块的话就能永久保存在磁盘中. 3.如何使用 ...

  4. Django知识总结

    一.什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. web应 ...

  5. 云计算 IaaS,SaaS,PaaS的区别?一个通俗易懂的吃货文章

    来自一篇吃货文章了: ———————————————————— &lt;img src="https://pic2.zhimg.com/a55676f8e1b084a398f8cd5 ...

  6. hive-jdbc获取查询日志慢的问题发现与解决

    1.问题描述: 数据平台的临时查询一直有一个问题,就是日志获取太慢了,每次都是和结果一块出来的,这就非常影响用户的体验,半天都没任何输出.另一个是Beeline客户端不一致,beeline客户端每次都 ...

  7. SpringBoot: 配置加载顺序

    在应用程序中各种配置是不可避免的,Spring中对配置的抽象(Environment)可以说是达到了极致,其中有一项尤为突出:PropertySource(配置来源),配置来源通常包括命令行参数,系统 ...

  8. 如何在jenkins的maven项目中,用mvn命令行指定findbugs的黑名单规则文件

    一:问题背景 最近在研究jenkins的过程中,针对maven项目,打算添加findbugs进行静态检查,但我不太想在项目的pom中进行修改,最好可以只修改jenkins的job配置,即配置外部化. ...

  9. [LeetCode] Split Linked List in Parts 拆分链表成部分

    Given a (singly) linked list with head node root, write a function to split the linked list into k c ...

  10. [LeetCode] Lonely Pixel II 孤独的像素之二

    Given a picture consisting of black and white pixels, and a positive integer N, find the number of b ...