WEB前端请求接口的多种方式，你知道吗？（marksheng）

左手的ㄟ右手 2022-11-19 01:13 556阅读 0赞

# 前端接口请求方式一： #

[jquery.ajax][]

用法：

jQuery.ajax(\[*settings*\])

$.ajax({
        url:"",    //请求的url地址
        success:function(req){
            //请求成功
        },
        error:function(){
            //请求出错
        },
        complete:function(){
            //请求完成
        }
    });

常用可选参数：

type

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url

类型：String

默认值: 当前页地址。发送请求的地址。

contentType

类型：String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。

常用值参考

【

application/x-www-form-urlencoded：数据被编码为名称/值对。这是标准的编码格式

application/json：消息主体是序列化后的 JSON 字符串

multipart/form-data： 需要在表单中进行文件上传时，就需要使用该格式。常见的媒体格式是上传文件之时使用的

text/plain：数据以纯文本形式(text/json/xml/html)进行编码，其中不含任何控件或格式字符。

】

async

类型：Boolean

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

context

类型：Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

data

类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 \{foo:\["bar1", "bar2"\]\} 转换为 '&foo=bar1&foo=bar2'

dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

*  "xml": 返回 XML 文档，可用 jQuery 处理。
 *  "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
 *  "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
 *  "json": 返回 JSON 数据 。
 *  "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
 *  "text": 返回纯文本字符串

jsonp

类型：String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 \{jsonp:'onJsonPLoad'\} 会导致将 "onJsonPLoad=?" 传给服务器。

# 前端接口请求方式二： #

## [axios][] ##

安装：

使用 npm：$ npm install axios

使用 bower：$ bower install axios

使用cdn：<script src="[https://unpkg.com/axios/dist/axios.min.js][https_unpkg.com_axios_dist_axios.min.js]"></script>

用法：

get请求：
    
    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    
    // 上面的请求也可以这样做
    axios.get('/user', {
        params: {
          ID: 12345
        }
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    POST请求：
    
    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
    多个并发请求：
    
    function getUserAccount() {
      return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
      return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
      .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成
      }));

# 前端请求方式三： #

使用该技术前建议先看文档和API:    [Fetch][]

安装：

npm install whatwg-fetch --save

npm install es6-promise --save

1.  `import 'whatwg-fetch'`
2.  `import 'es6-promise'`

请注意，`fetch`规范与`jQuery.ajax()`主要有两种方式的不同，牢记：

*  当接收到一个代表错误的 HTTP 状态码时，从 `fetch()`返回的 Promise **不会被标记为 reject，** 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 `ok` 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
 *  默认情况下，`fetch` **不会从服务端发送或接收任何 cookies**, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 [credentials][] 选项）。自从2017年8月25日后，默认的credentials政策变更为`same-origin`Firefox也在61.0b13中改变默认值

## 进行 fetch 请求  ##

一个基本的 fetch请求设置起来很简单。看看下面的代码：

fetch('http://example.com/movies.json')
      .then(function(response) {
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });

[jquery.ajax]: http://www.w3school.com.cn/jquery/ajax_ajax.asp
[axios]: http://www.axios-js.com/zh-cn/docs/
[https_unpkg.com_axios_dist_axios.min.js]: https://unpkg.com/axios@0.19.0/dist/axios.min.js
[Fetch]: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82
[credentials]: https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch#%E5%8F%82%E6%95%B0