2

网络请求(vue)

 2 years ago
source link: https://blog.csdn.net/tby_pr/article/details/121110719
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

网络请求方案    // 原生网络请求 和 js网络请求库

一、 原生网络请求

1. XMLHttpRequest(w3c标准)    // 没有promise时的产物

当时的万物皆回调,太麻烦

2. Fetch    // html5提供的对象,基于promise

因为promise的存在,为了简化网络请求。

使用 Fetch - Web API 接口参考 | MDN

Fetch是新的ajax解决方案 Fetch会返回Promise对象。fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。

1、第一个参数是URL:

2、第二个设置请求的参数,是可选参数

3、返回使用了Promise 来处理结果/回调

fetch(url, options).then(res=>res.json()/text()).then(ret=>console.log(ret))

兼容性问题:

ie低版本不兼容Fetch怎么办? =》 用第三方的Fetch库【fetch-polyfill】


使用fetch进行网络请求

let url1  url2  两个地址同时执行完毕后才进行相关操作 Promise.all

let url1 不管它是否执行成功我都要去处理 Promise.finally


封装 -- fetch网络请求

封装 -- fetch网络请求_tby_pr的博客-CSDN博客


二、 js网络请求库

axios

以promise类型返回 json 数据。

文档:使用说明 · Axios 中文说明 · 看云

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

能拦截请求响应,自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。

或通过实例请求

 通过实例请求,添加设置信息(常用)!

 不通过实例做统一设置(不常用),因为是给所有人都设置

post提交

 或者    axios直接用 # 标准写法(也不常用)


拦截器   切面编程(流水线)   (中间件)

1. 请求拦截器(能调用多次)

2. 响应拦截器(处理、过滤)


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK