一、axios的功能特点

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
支持多种请求方式:
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

二、常见的配置选项

请求地址
url: '/user',
请求类型
method: 'get',
请根路径
baseURL: 'http://www.mt.com/api',
请求前的数据处理
transformRequest:[function(data){}],
请求后的数据处理
transformResponse: [function(data){}],
自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象 对应的是get请求,传参数
params:{ id: 12 },
 
查询对象序列化函数
paramsSerializer: function(params){ }
request body:对应的是post请求,传请求数据
data: { key: 'aa'},
超时设置s
timeout: 1000,
跨域是否带Token
withCredentials: false,
自定义请求处理
adapter: function(resolve, reject, config){},
身份验证信息
auth: { uname: '', pwd: '12'},
响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',

三、axios封装

第一步:安装axios

npm install axios --save

第二步:在main.js中引入

import axios from 'axios'
 
第三步:在request.js里面封装

方式一:必须传三个参数 回调函数的方法


 import axios from 'axios'
export function request(config, success, failure) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config.baseconfig)
.then(res => {
// console.log(res) //要回调出去
success(res) //回调
})
.catch(err => {
// console.log(err) //要回调出去
failure(err) //回调
})
}

调用:

import {request} from "./network/request"
//方式一:
request({ //config
url: '',
}, res => { //success
console.log(res)
}, err => { //failure
console.log(err)
})

方式二:只传一个config 回调函数的方法

export function request(config) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config.baseconfig)
.then(res => {
// console.log(res) //不能直接在这里处理数据要回调出去
config.success(res) //回调
})
.catch(err => {
// console.log(err) //不能直接在这里处理数据要回调出去
config.failure(err) //回调
})
}

调用:

request({
baseconfig: { },
success: function(res) { },
failure: function(err) { }
})

方式三: Promise方法

export function request(config) {
return new Promise((resolve, reject) => {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
instance(config)
.then(res => {
// console.log(res) //要回调出去
resolve(res) //回调
})
.catch(err => {
// console.log(err) //要回调出去
reject(err) //回调
})
})
}

这样写其实是有点多余,因为axios本身返回的是一个promise(下图源码),所以可以直接return,不用自己包装promise

export function request(config) {
//创建axios实例
const instance = axios.creat({
baseURL: 'http://192.168.14.146:8088',
timeout: 50000
})
//发送真正的网络请求
return instance(config)
//create 的axios返回值本身是一个promise,所以直接return就可以了,不用自己包装promise
}

调用:

//方式三
request({
url: '',
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})

vue项目中axios的封装和使用的更多相关文章

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

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

  2. vue项目中的函数封装

    项目中一般都会有fun.js这类的文件,里面有各种的如转换时间格式的,处理转换的等等函数方法. 其实经常用到的去获取基本数据的接口也可以封装成一个方法,方便复用. 如上面所标,获取列表数据之前需要先获 ...

  3. vue.js中axios的封装

    基于前文所述,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 如果还对a ...

  4. 在vue项目中使用自己封装的ajax

    在 src 目录下新建 vue.extend.js ,内容如下: export default { install(Vue) { Vue.prototype.$http=function(option ...

  5. 关于vue项目中axios跨域的解决方法(开发环境)

    1.在config文件中修改index.js proxyTable: { "/api":{ target: 'https://www.baidu.com/muc/',//你需要跨域 ...

  6. Vue项目中的http请求统一管理

    module.exports = { dev: { // Paths assetsSubDirectory: '/', assetsPublicPath: '/', proxyTable: { /op ...

  7. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  8. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

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

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

随机推荐

  1. springboot启动报错start bean 'eurekaAutoServiceRegistration' NullPointerException

    解决方案参考:https://blog.csdn.net/hhj13978064496/article/details/82825365 我将eureka的依赖包放到了依赖包的最下面,启动报错, 如下 ...

  2. 129、TensorFlow计算图的可视化

    import tensorflow as tf # Build your graph x = tf.constant([[37.0, -23.0], [1.0, 4.0]], name="i ...

  3. JDK 5.0 新增解决线程安全 Callable接口和线程池

    在jdk5.0后又新增了两种解决线程安全的问题 一: 实现Callable接口, 实现接口步骤: 1: 创建一个实现Callable接口的实现类 2: 实现Callable接口中的call()方法, ...

  4. tomcat 迁移到weblogic 问题

    问题1: Caused by: java.lang.UnsupportedClassVersionError: com/audaque/datadiscovery/soap/service/impl/ ...

  5. Vagrant 手册之 Vagrantfile - 最低版本

    原文地址 可以在 Vagrantfile 中指定一组 Vagrant 的版本,以强制人们使用带有 Vagrantfile 的特定版本的 Vagrant.这可以帮助解决使用带有 Vagrantfile ...

  6. SEC8 - MySQL 查询语句--------------进阶4:常见的函数

    # 进阶4:常见的函数 /* 概念:将一组逻辑语句封装在方法体中,对外暴露方法名 好处:1.隐藏了实现细节 2.提高代码的复用性 调用: select 函数名() [from 表]; 特点: (1)叫 ...

  7. layer帮助手册

    layer帮助手册 键:值    调用时按需重新分配,可实现各种风格,如:$.layer({键:值,键:值,......}) 描述 type:0 层的类型.0:信息框(默认),1:页面层,2:ifra ...

  8. 洛谷 P1546 最短网络 Agri-Net(最小生成树)

    题目链接 https://www.luogu.org/problemnew/show/P1546 说过了不复制内容了 显然是个最小生成树. 解题思路 prim算法 Kruskal算法 prim算法很直 ...

  9. 【题解】Hankson 的趣味题

    题目大意 已知正整数$a_{0}$.$a_{1}$.$b_{0}$.$b_{1}$($1 \leq a_{0}, a_{1}, b_{0}, b_{1} \leq 2 \times 10^{9}$), ...

  10. 相对路径 分类: C# 2015-06-11 15:41 8人阅读 评论(0) 收藏

    .绝对路径     绝对路径是指文件在硬盘上真正存在的路径.例如"bg.jpg"这个图片是存放在硬盘的"E:\book\网页布局代码\第2章"目录下,那么 &q ...