网络请求工具（ajax//axios//fetch）

时间：2019-08-15 20:16:37 阅读：146 评论：0 收藏：0 [点我收藏+]

# 网络请求工具

- 原生 ajax 的写法。自己实现 xmlhttprequest

- jquery \$.ajax

- vue-resource vue 1.x 的时候提供的网络请求工具。尤雨溪在 vue 2.x 中推荐我们使用 axios

- axios

- fetch

## axios

> 专注于网络请求的工具，不光可以用在浏览器端，还可以用在 node 中。

> promise 封装

> 请求拦截和响应拦截

1. 安装

```shell

npm install --save axios

```

2. 简单使用

2.0 axios(config)

2.1 axios.get(url, [config])

2.2 axios.post(url, [data], [config])

#### axios.get 如何传递请求参数

http://localhost:3000/api/getBrand

1. 直接将参数拼接在 url 地址后面。

```js

axios.get(‘http://localhost:3000/api/getBrand?pageNum=1&pageSize=10‘)

```

2. 使用 params 这个选项

```js

axios.get(‘http://localhost:3000/api/getBrand‘, {

params: {

pageNum: 1,

pageSize: 10

}

})

#### axios.post 如何传递请求参数

http://localhost:3000/api/getBrand

1. 使用第二个 data 参数

```js

axios.post(‘http://localhost:3000/api/getBrand‘, {

pageNum: 1,

pageSize: 10

})

```

2. 使用 data 选项

```js

axios.post(‘http://localhost:3000/api/getBrand‘, null, {

data: {

pageNum: 1,

pageSize: 10

}

})

```

#### 创建实例来实现对 axios 的封装

```js

var instance = axios.create({ //返回axios的实例对象

// 返回后带了这些默认选项的配置

baseURL: ‘https://some-domain.com/api/‘, //基础路径，后面请求不需要加这路径

（// baseURL: ‘https://m.maizuo.com‘, // 在发送请求时，如果没有明确指定请求的域名地址信息，那么会主动将请求地址拼接上这个 baseURL）

timeout: 1000,

headers: { ‘X-Custom-Header‘: ‘foobar‘ } //请求头

})

如：

// 1. 引入 axios node 中的 commonJS 规范方式

const axios = require(‘axios‘)

const http = axios.create({

// 传递一些默认的选项

baseURL: ‘https://m.maizuo.com‘, // 在发送请求时，如果没有明确指定请求的域名地址信息，那么会主动将请求地址拼接上这个 baseURL

headers: {

‘X-Client-Info‘:

‘{"a":"3000","ch":"1002","v":"5.0.4","e":"156584910960129542198"}‘,

‘X-Host‘: ‘mall.cfg.common-banner‘

}

})

// 一些拦截的设置

// 响应的拦截，当请求响应回到 .then 回调之前，会执行这段代码的回调函数

http.interceptors.response.use(function(response) {

console.log(‘1‘)

return response.data

})

http.get(‘/gateway?type=2&cityId=440300&k=1367332‘).then(response => {

console.log(2)

console.log(response)

})

```

借助axios的拦截器实现Vue.js中登陆状态校验的思路

http://www.imooc.com/article/25167

#### axios 请求回来的数据，默认需要在 reponse.data 中获取到(体现了封装的必要)

不同于$.ajax 直接返回res 响应数据

## fetch

html5 新增的一个底层 api,用来替代 xmlHttpRequest。

https://elvmx.gitee.io/lv-wiki/vue/4-day04.html#fetch

## ajax 与 jquery 里面的 \$.ajax 还有 axios 还有 fetch 他们之间有啥区别

1. ajax 不是一门技术，而是为了实现某个功能的一系列技术的统称。

2. jquery 中的 \$.ajax 是对原生的 XmlHttpRequest 对象的一个封装而已

3. axios 与 jquery 类似，也是基于原生的 XmlHttpReuqest 的封装。在此基础上，再提供了 Promise Api 与请求响应拦截之类的功能。还能使用在 node 环境中

4. fetch 与上面 3 个没有可比性。他是一个 html5 中新增的底层 api，用来替代 xmlHttpRequest . 比 xmlHttpRequest 的使用来简便一些，也实现了 Promise Api. 但是兼容性不是那么好。但是可以通过垫片去增加其兼容性。用它来跟 jquery 中的 \$.ajax 或者 axios 来比。

网络请求工具（ajax//axios//fetch）

原文：https://www.cnblogs.com/shenlan88/p/11360224.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)