一、axios使用

1.支持多种请求方式：

2.安装

3.简单使用实例

4.发送并发请求

5.全局配置

二、axios的实例

1.为什么要创建 axios的实例呢?

2.使用

三、、axios模块封装

四、axios拦截器

一、axios使用

1.支持多种请求方式：

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]])

2.安装

npm install axios --save

3.简单使用实例

1.安装
import axios from 'axios'
2.get请求
axios({// 默认是geturl: 'http://localhost:8000/home/multidata',method: 'get'
}).then((result) => {console.log(result)
})
---
axios({//url:  'http://localhost:8000/home/data?type=sell&page=1',url: 'http://localhost:8000/home/data',params: {type: 'sell',page: 1},method: 'get'
}).then((result) => {console.log(result)
})

4.发送并发请求

有时候，我们可能需求同时发送两个请求

使用axios.all，可以放入多个请求的数组。

axios.all([]) 返回的结果是一个数组，使用axios.spread可将数组[res1, res2]展开为res1，res2

axios.all([axios({url: 'http://localhost:8000/home/multidata'
}), axios({url: 'http://localhost:8000/home/data',params: {type: 'sell',page: 1}
})]).then((results) => {console.log(results)
})
//axios.spread展开（不太常用）
axios.all([axios({url: 'http://localhost:8000/home/multidata'
}), axios({url: 'http://localhost:8000/home/data',params: {type: 'sell',page: 1}
})]).then(axios.spread((res1, res2) => {console.log(res1)console.log(res2)
}))
//数组的解构，对应也有对象的解构{name, age} = obj
axios.all([axios({url: 'http://localhost:8000/home/multidata'
}), axios({url: 'http://localhost:8000/home/data',params: {type: 'sell',page: 1}
})]).then(([res1, res2]) => {console.log(res1)console.log(res2)
})

5.全局配置

（1）在上面的示例中，我们的BaseURL是固定的

事实上，在开发中可能很多参数都是固定的。

这个时候我们可以进行一些抽取，也可以利用axios的全局配置

axios.defaults.baseURL = 'http://localhost:8000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www/form-urlencoded'
axios.default.timeOut = 50000axios.all([axios({url: '/home/multidata'
}), axios({url: '/home/data',params: {type: 'sell',page: 1}
})]).then((results) => {console.log(results)
})

（2）常见配置项

请求地址

url:'/user',

请求类型

method:'get',

请根路径

baseURL:'http://www.mt.com/apl,

请求前的数据处理

transformRequest: [function(data){}]

请求后的数据处理

transformResponse: [function(data){}],

自定义的请求头

headers:{'x-requested-With':'XMLHttpRequest'},

URL查询对象

params:{id:12},

查询对象序列化函数

paramsSerializer: function(params){}

request body

data:{key:'a'}

超时设置s

timeout: 1000,

跨域是否带 Token

withCredentials: false,

自定义请求处理

adapter: function(resolve, reject, config){},

身份验证信息

auth: {uname:", pwd: '12'},

响应的数据格式json/blob/ document/ arraybuffer/text/ stream

responseType:'json',

二、axios的实例

1.为什么要创建 axios的实例呢?

口当我们从 axios模块中导入对象时,使用的实例是默认的实例

口当给该实例设置一些默认配置时,这些配置就被固定下来了.

口但是后续开发中,某些配置可能会不太一样.

口比如某些请求需要使用特定的 baseURL或者 timeouti或者 content-Type等

口这个时候我们就可以创建新的实例，并且传入属于该实例的配置信息.

2.使用

const instance1 = axios.create({// 全局实例配置baseURL: 'http://localhost:8000',timeOut: 5000
})instance1({url: '/home/multidata'
}).then(res => {console.log(res)
})

三、、axios模块封装

import axios from 'axios'
// 1.传success、failure方法
export function request(config, success, failure) {//1.创建实例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 2.发送真正的网络请求instance(config).then(res => {success(res)}).catch(err => {failure(err)})
}
// 2.只传config
export function request2(config) {//1.创建实例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 2.发送真正的网络请求instance(config.baseConfig).then(res => {config.success(res)}).catch(err => {config.failure(err)})
}
// 3.使用Promise（axios本身是返回一个Promise，所以没必要再次返回一个promise了）
export function request3(config) {return new Promise((resolve, reject) => {//1.创建实例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 2.发送真正的网络请求instance(config).then(res => {resolve(res)}).catch(err => {reject(err)})})
}
// 4.简化
export function request4(config) {//1.创建实例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 2.发送真正的网络请求return instance(config);
}

// 封装网络请求
import {request, request2, request3, request4} from  './network/request'
request({url: '/home/multidata'
}, res => {console.log(res)
})
request2({baseConfig: {url: '/home/multidata'},success: function(res) {console.log(res)}
})
request3({url: '/home/multidata'
}).then(res => {console.log(res)
}).catch(err => {console.log(err)
})
request4({url: '/home/multidata'
}).then(res => {console.log(res)
})

四、axios拦截器

     //1.创建实例const instance = axios.create({baseURL: 'http://localhost:8000',timeOut: 5000})// 1.1拦截器，必须return，否则拿不到东西instance.interceptors.request.use(config => {console.log('req拦截器success')// 比如config中的一些信息不符合服务器的要求// 比如每次发送网络请求时，都希望在界面显示一个请求的图标// 某些网络请求（比如登录）必须携带一些特殊的东西console.log(config)return config}, err => {console.log('req拦截器fail')console.log(err)return err})instance.interceptors.response.use(response => {console.log('resp拦截器success中')return response.data}, err => {console.log('resp拦截器fail中')return err})// 2.发送真正的网络请求instance(config).then(res => {success(res)}).catch(err => {failure(err)})

vue如何发送网络请求，使用axios事半功倍！相关推荐

如何在UNIAPP里发送网络请求 #在axios里内嵌request的大聪明前来填坑
目录 1)用axios封装,内嵌request
Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）
一.Axios 1.定义:利用ES6提供的Promise方式,把AJAX进行了封装.我们在Vue中发送网络请求,基本上就是使用Axios 需要安装第三方的Axios模块,才能使用 ...
Fetch发送网络请求
1. 文档 https://github.github.io/fetch/ https://segmentfault.com/a/1190000003810652 2. 特点 fetch: 原生函数, ...
axios发送网络请求
网络模块封装选择什么网络模块传统的Ajax 缺点:配置和调用方式等非常混乱 jQuery-Ajax 缺点:在Vue整个开发中都是不需要使用jQuery的 axios axios 功能特点: 在浏览 ...
网络编程-JavaScript中发送网络请求汇总
文章目录 1.前后端分离优势 2.HTTP协议的解析 2.1 HTTP的介绍 2.2 HTTP的组成 2.3 HTTP的版本 2.4 HTTP请求方式 2.5 HTTP请求头字段 2.6 HTTP响应 ...
微信小程序中发送网络请求
文章目录小程序项目 app.json pages/index/index.html pages/index/index.wxss pages/index/index.js 发送网络请求网络请求函数 ...
OkHttp3 发送网络请求服务器
前言:应用程序需要发送网络请求服务器的接口,可使用OkHttp 3发送请求获取服务端数据 GitHut地址 Step 1:申请网络请求的权限:在manifests层的AndroidManifest.x ...
python 网络接口开发_Python自动化学习笔记（八）——接口开发、发送网络请求、发送邮件、写日志...
1.接口开发(flask模块) Python自动化学习笔记(七)接口开发部分的内容补充 1.1参数为json格式: flask.request.is_json #判断参数是否是json格式 flask ...
Python自动化学习笔记（八）——接口开发、发送网络请求、发送邮件、写日志...
1.接口开发(flask模块) Python自动化学习笔记(七)接口开发部分的内容补充 1.1参数为json格式: flask.request.is_json #判断参数是否是json格式 flask ...

vue如何发送网络请求，使用axios事半功倍！

一、axios使用

1.支持多种请求方式：

2.安装

3.简单使用实例

4.发送并发请求

5.全局配置

二、axios的实例

1.为什么要创建 axios的实例呢?

2.使用

三、、axios模块封装

四、axios拦截器

vue如何发送网络请求，使用axios事半功倍！相关推荐

最新文章

热门文章