一、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. zhanghao

    账号:wx8b9ddd1c943ce95f 密码:fa72de9a1721849edc7f41f8a81019e5

  2. CDN-template

    ylbtech-CDN: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部   9.返回顶部   10.返 ...

  3. JavaScript中的十种操作符

    ①   一元操作符(参与的只有一个变量) 前置递增递减(语句解析到递增/递减时值就被改变了) 后置递增递减(整个语句执行后值再改变) 递增递减也可用于字符串,布尔值,对象等,结果都将是数值:   ;v ...

  4. Python笔记(十九)_继承

    继承 继承可以把父类的所有功能都直接拿过来,这样就不必从零做起,子类只需要新增自己特有的方法,也可以把父类不适合的方法覆盖重写 多重继承 通过多重继承,一个子类就可以同时获得多个父类的所有功能 > ...

  5. MySQL点滴记录

    1.查询所用引擎 show engines;

  6. 求bit中1的个数有几种做法

    原文 求bit中1的个数有几种做法: - x & (x - 1) - Hamming weight的经典求法,基于树状累加:http://en.wikipedia.org/wiki/Hammi ...

  7. [Linux] 009 链接命令

    链接命令:ln 命令名称:ln 命令英文原意:link 命令所在路径:/bin/ln 执行权限:所有用户 语法:ln -s [原文件] [目标文件] 功能描述:生成链接文件 范例: 创建文件 /etc ...

  8. Netty之揭开BootStrap 的神秘面纱

    客户端BootStrap: Bootstrap 是Netty 提供的一个便利的工厂类, 我们可以通过它来完成Netty 的客户端或服务器端的Netty 初始化.下面我先来看一个例子, 从客户端和服务器 ...

  9. Ubuntu 18.04安装docker 以及Nginx服务设置

    1.安装需要的包sudo apt install apt-transport-https ca-certificates software-properties-common curl 2.添加 GP ...

  10. 移动端web整理 移动端问题总结,移动web遇到的那些坑

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...