一篇文章搞懂AJAX、Fetch和Axios

什么是网络请求

我们在网上冲浪的时候，有没有想过那些文字照片视频是怎么传送到浏览器上的呢？其实这涉及到计算机网络相关的知识，我们的客户端和网站的服务器之间要进行很多的数据传输，也就是请求与响应。

客户端发送请求，服务器接收请求并作出响应；客户端处理响应的数据，呈现到页面上，就实现了页面的更新。

那么请求与响应是用什么技术实现的呢？这就是我们要讲的Ajax。

AJAX

按照官方的定义，AJAX是一种网页开发技术，可以实现网页异步更新，不重新加载网页也能对网页进行部分更新。基于原生XHR开发，由XMLHttpRequest的API实现。相比于不使用AJAX的传统网页，AJAX可以局部刷新页面，当数据更新时无需重载整个页面。

具体的请求步骤如下，还是很繁琐的

js 复制代码

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();
// 规定请求类型、URL、是否异步；get请求的参数可以用?=&跟在url后面
xhr.open('GET', 'url', true);
// 发送信息至服务器时内容编码类型，get请求可以省略这一段
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求，参数是请求的具体信息，一般post请求需要设置
xhr.send()
// 监听服务器的通信状态，接收服务器响应数据
xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        cosnole.log(JSON.parse(xhr.responseText))
    }
}

Fetch

原生ajax操作实在是太麻烦了，于是官方推出了Fetch，它是一个底层API ，用来代替XHR，基于promise实现，因此也支持async和await。没有使用XMLHttpRequest对象。但是它不携带cookie，需要手动添加配置项。

它的实现方式如下

js 复制代码

fetch('url/get或post', {
    // 如果是post请求，需要设置请求头；get请求可以省略这一段
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
})
    .then(res => {
        if(res.ok) {
            return res.json();
        }
    })
    .then(data => {
        console.log(data);
    })

Axios

前面说了这么多，其实我们开发中最常用的还是Axios，它是基于promise封装的http库（而Fetch是js自带的api），可以用在浏览器和nodejs中。它本质是对原生XMLHttpRequest的封装，且支持Promise API，还可以拦截请求和响应，转换JSON数据。最重要的是很好写，可以说是十分方便了。

js 复制代码

// 展示一种较常见的写法
(async () => {
    // 创建axios实例，为请求设置统一的url和请求头等信息
    const http = axios.create({
        baseURL: 'uel',
        timeout: 10000, // 请求多久超时
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    })
    
    const res = await http.get('/get或post', {
        // 请求参数，get请求需要用params，post请求需要用data
        params: {
            id: 1,
            name: 'test'
        }
    })
})()

可以添加请求拦截器，在发送请求前进行一些操作，比如添加token；同时可以设置相应拦截器，在接收到响应后先做一层判断，比如状态码判断登录、授权

js 复制代码

    // 添加请求拦截器
    http.interceptors.request.use(
        config => {
        // 在发送请求之前做些什么
        console.log('发送了请求');
        return config;
        },
        error=> {
        // 对请求错误做些什么
        return Promise.reject(error);
        },
    );
  
    // 添加响应拦截器
    http.interceptors.response.use(
        res =>  {
        // 对响应数据做点什么
        // 对接口异常的数据需要给用户提示
        return response;
        },
        error => {
        // 对响应错误做点什么
        return Promise.reject(error);
        },
    );

如果是在nodejs中，还可以利用node环境变量判断区分开发测试生产环境

ini 复制代码

    if(process.env.NODE_ENV === 'development') {
        axios.defaults.baseURL = 'http://localhost:3000' // 开发环境下，请求地址改为本地地址
    } else if (process.env.NODE_ENV === 'production') {
        axios.defaults.baseURL = 'url' // 生产环境下，请求地址改为线上地址
    }

关于axios的更多用法请查阅文档吧！