likes
comments
collection
share

什么是axios？

作者站长头像
站长
· 阅读数 48

axios

一、什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据，通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。

功能：

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML（EXtensible Markup Language，独立于软件和硬件的信息传输工具），它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

二、初始化一个 XMLHttpRequest 实例对象

所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。

xmlhttp=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

实例对象继承 XMLHttpRequestEventTarget 和 EventTarget 的属性。

三、再来简单认识一下ajax

前端程序员常说的Ajax是 Asynchronous JavaScript and XML的缩写，意思是异步网络请求。区别于传统web开发中采用的同步方式。

Ajax带来的最大影响就是页面可以无刷新的请求数据（页面局部刷新）。

1、ajax的工作原理

Ajax 的原理简单来说通过浏览器的 javascript 对象 XMLHttpRequest （Ajax引擎）对象向服务器发送异步请求并接收服务器的响应数据，然后用 javascript 来操作 DOM 而更新页面

这其中最关键的一步就是从服务器获得请求数据，即用户的请求间接通过 Ajax 引擎发出而不是通过浏览器直接发出，同时 Ajax 引擎也接收服务器返回响应的数据，所以不会导致浏览器上的页面全部刷新

2、如何实现一个Ajax请求？：

var request = new XMLHttpRequest(); // 创建XMLHttpRequest对象

//ajax是异步的，设置回调函数

request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应状态码
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}

// 发送请求:
request.open('GET', '/api/categories');
request.setRequestHeader("Content-Type", "application/json") //设置请求头
request.send();//到这一步，请求才正式发出

使用ajax的缺点：

  • ajax干掉了back按钮，即对浏览器后退机制的破坏。
  • 存在一定的安全问题。
  • 对搜索引擎的支持比较弱。
  • 破坏了程序的异常机制。
  • 无法用URL直接访问。
  • 存在跨域问题(同源)

优点：

  • 页面无刷新，用户体验好。
  • 异步通信，更加快的响应能力。
  • 减少冗余请求，减轻了服务器负担
  • 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

四、axios是什么？

Axios 是一个基于 promise 的 HTTP 库，用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范

特点：

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

1、axios跨域问题

什么是跨域？：简单来说跨域是指一个域下的文档或脚本想要去去请求另一个域下的资源，前后端分离时，前端和后端API服务器可能不在同一台主机上，就存在跨域问题，浏览器限制了跨域访问。（跨域只存在于PC端）

同源策略： ​是一种约定，由 Netscape 公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击，同源言外之意是指协议，域名，端口都要相同，其中有一个不同都会产生跨域。

跨域解决: 通过代理请求的方式解决，将 API 请求通过代理服务器请求到 API 服务器。 开发环境中，在 vue.config.js 文件中使用 devServer.proxy 选项进行代理配置。

而在不同源的情况下，同源策略限制了

  1. Cookie、LocalStorage、IndexedDB 等存储性内容无法读取
  2. DOM 节点和 Js对象无法获得
  3. AJAX 请求发送后，结果被浏览器拦截（注意是 请求发送出去了，也拿到结果了，只是被浏览器截胡了）

解决开发环境跨域问题

在vue.config.js文件中使用devServer.proxy选项进行代理配置

module.exports = {
    devServer: {
        port: 8888, // 端口号，如果端口号被占用，会自动提升1
        host: "localhost", //主机名， 127.0.0.1，  真机 0.0.0.0
        https: false, //协议
        open: true, //启动服务时自动打开浏览器访问
        proxy: { //代理配置
            // 匹配 /dev-api 开头的请求，
            '/dev-api': {
                // 目标服务器, 代理访问到 https://localhost:8001
                target: 'http://localhost:8001',
                // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，
                // 并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                changOrigin: true, //开启代理
                pathRewrite: {
                    // 会将 /dev-api 替换为 '',也就是 /dev-api 会移除，
                    // 如 /dev-api/db.json 代理到 https://localhost:8080/db.json
                    '^/dev-api': '',
                }
            }
        }
    },
   lintOnSave: false, // 关闭格式检查
   productionSourceMap: false // 打包时不会生成 .map 文件，加快打包速度
}

2、封装Axios对象

因为项目中很多组件中要通过 Axios 发送异步请求，所以封装一个 Axios 对象。自已封装的 Axios 在后续可以使用 axios 中提供的拦截器。

  • 在src目录下创建utils目录，在utils下创建request.js文件
  • 基本配置
import axios from 'axios' //引入axios
 
// 手动创建一个 axios 对象, 参考: https://github.com/axios/axios#creating-an-instance 
const request = axios.create({  
    // 根据不同环境设置 baseURL, 终发送请求时的URL为: baseURL + 发送请求时写URL ,  
    // 比如 get('/test'), 终发送请求是: /dev-api/test  
    // baseURL: '/dev-api',
    baseURL: '/',
    timeout: 5000 // 请求超时
})
 
export default request // 导出 axios 对象

3、请求拦截器和响应拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
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);
  });

4、通过向 axios 传递相关配置来创建请求:

  • url（必写）：请求地址
  • method：请求方法，默认是get
  • baseURL（常用）：baseURL会添加到url前（url是绝对地址除外）。
  • transformRequest：transformRequest选项允许我们在请求发送到服务器之前对请求的数据做出一些 改动，该选项只适用于以下请求方式：put/post/patch
  • transformResponsetransformResponse选项允许我们在数据传送到then/catch方法之前对数据进行改动
  • headers（常用，如设置请求头json类型： 自定义请求头信息
//例如：
Content-Type  //标头告诉客户端实际返回的内容的内容类型。
Content-Type: text/html; charset=utf-8
Content-Type: multipart/form-data; boundary=something

// 表示在配置中的设置头消息的字段Authorization为从本地获取的token值
headers.Authorization = window.sessionStorage.getItem('token')
  • params（常用：params选项是要随请求一起发送的请求参数----一般链接在URL后面
  • data（常用）：data选项是作为一个请求体而需要被发送的数据，该选项只适用于方法put/post/patch在浏览器上data只能是FormData, File, Blob格式
  • timeout（常用） 超时时间
  • withCredentials：withCredentails选项表明了是否是跨域请求、默认是default
  • onUploadProgress：onUploadProgress上传进度事件
  • onDownloadProgress：下载进度的事件
  • maxContentLength： 相应内容的最大值
转载自:https://juejin.cn/post/7210584884322271269
评论
请登录