网络请求大综合

Fuufhjn...

网络请求大综合

Fetch的基本实现

用法：

componentDidMount() {
    fetch(url)
    .then(res => res.json())
    .then(data => {
        // process...
    })
}

先处理成json再获得原始数据。

Fetch的参数

fetch(url, {
    method: 'POST',
    body: {
        user_id: 'fuufhjn',
        password: 'qwer1234'
    },
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
}).then...

如果想把请求体对象类型转化为请求字符串，nodejs提供了一种方式，queryString中的query.stringify：

queryString.stringify({
    user_id: 'fuufhjn',
    password: 'qwer1234'
});

Fetch跨域处理

手动配置跨域：

在src下创建文件src/setupProxy.js，安装：

npm install http-proxy-middleware --save

在文件中导入：

const { createProxyMiddleWare } = require('http-proxy-middleware');
module.exports = (app) => {
    app.use(
    	'/api',
        createProxyMiddleWare({
            target: 'http://localhost:5000',
            changeOrigin: true
        })
    );
};

Axios

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

特点

从浏览器中创建XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

安装

npm install axios

使用

可配置全局默认地址：

axios.defaults.baseURL = 'http://fuufhjn.link';

请求写法：

axios.get('/user?ID=12345')
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

请求与响应拦截器：

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

跨域处理

和Fetch一样，依然是用文件src/setupProxy.js来处理，一模一样。

Axios的优点：为什么用它不用Fetch？

Axios 提供了更简洁、链式调用的 API（如 axios.get(), axios.post()），而 Fetch 需要手动处理请求和响应（如 fetch().then().then()）。Axios 直接返回 JSON 格式的数据，而 Fetch 需要手动调用 .json() 并检查响应状态。
Axios 能自动捕获 HTTP 错误（如 404、500），而 Fetch 只有在网络故障时才会 reject，HTTP 错误需手动检查 response.ok。
Axios 支持拦截器（interceptors），方便在请求前或响应后添加全局逻辑（如添加 token、统一错误处理）。

Axios发送请求的流程

1.创建/合并配置 → 2. 请求拦截器 → 3. 转换请求数据 → 4. 适配器发送请求 →5. 接收响应 → 6. 转换响应数据 → 7. 响应拦截器 → 8. 返回给调用者

入口函数调用：

axios.get('/user', {
  params: { ID: 12345 },
  timeout: 1000
})

创建请求配置

合并配置：
- 合并默认配置(axios.defaults)和传入的配置
- 对于 axios.get/axios.post 等方法，URL 和 method 会被添加到配置中
转换配置：
- 执行请求配置的转换函数(如果有)
- 处理 params，将其序列化为查询字符串

构建 Promise 链

初始化拦截器中间件：
- 创建包含 dispatchRequest(实际发送请求)的 Promise 链
- 将请求拦截器添加到链的前端
- 将响应拦截器添加到链的后端

// 伪代码表示拦截器链
Promise.resolve(config)
  .then(requestInterceptor1)
  .then(requestInterceptor2)
  .then(dispatchRequest)  // 实际发送请求
  .then(responseInterceptor1)
  .then(responseInterceptor2)
  .then(handleResponse)
  .catch(handleError);

请求拦截器阶段

执行请求拦截器：
- 按照添加顺序同步执行所有请求拦截器
- 每个拦截器可以修改配置或抛出错误
- 拦截器可以返回配置对象或 Promise

发送请求 (`dispatchRequest`)

选择适配器：
- 检查是否是自定义适配器
- 根据环境选择浏览器适配器(XHR)或Node适配器(http)
转换请求数据：
- 根据 transformRequest 转换请求数据
- 自动处理 JSON 数据的序列化
XHR 适配器流程(浏览器端)：

// 伪代码
function xhrAdapter(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    
    // 设置超时
    if (config.timeout) {
      xhr.timeout = config.timeout;
    }
    
    // 初始化请求
    xhr.open(config.method.toUpperCase(), buildURL(config.url, config.params, config.paramsSerializer), true);
    
    // 设置请求头
    setHeaders(xhr, config.headers);
    
    // 处理取消请求
    if (config.cancelToken) {
      config.cancelToken.promise.then(cancel => {
        xhr.abort();
        reject(cancel);
      });
    }
    
    // 处理响应
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        const response = {
          data: transformResponseData(xhr.response),
          status: xhr.status,
          statusText: xhr.statusText,
          headers: parseHeaders(xhr.getAllResponseHeaders()),
          config: config,
          request: xhr
        };
        
        // 根据状态码决定 resolve 或 reject
        (xhr.status >= 200 && xhr.status < 300 ? resolve : reject)(response);
      }
    };
    
    // 处理错误
    xhr.onerror = function() { reject(...) };
    xhr.ontimeout = function() { reject(...) };
    
    // 发送请求
    xhr.send(config.data);
  });
}

响应拦截器阶段

执行响应拦截器：
- 按照添加顺序同步执行所有响应拦截器
- 每个拦截器可以修改响应或抛出错误
- 拦截器可以返回响应对象或 Promise

处理最终响应/错误

成功响应：
- 返回给用户代码的 Promise 被 resolve
- 包含完整的响应对象
错误处理：
- 任何阶段的错误都会沿着 Promise 链传递
- 最终被用户代码的 .catch() 或 try/catch 捕获

Axios和ajax的关系

axios和ajax：Axios和Ajax之间的关系可以理解为：Ajax是一种技术概念，而Axios是Ajax的一个具体实现库。Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。它允许网页应用程序快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。

Axios是一个基于Promise的HTTP客户端，用于浏览器和node.js。它是Ajax技术的一个封装，提供了一套简洁的API来处理HTTP请求和响应，自动处理了XMLHttpRequest的创建和配置，使得发起网络请求变得更加简单。

NickName

E-Mail

Website

Comments

Latest
Oldest
Hottest

网络请求大综合

Preview: