最新文章:

您的位置: 富录-前端开发|web技术博客 > JavaScript > 关于Axios这一篇就够了

关于Axios这一篇就够了

发布时间:2024年06月20日 评论数:抢沙发阅读数: 163

    什么是Axios?

    Axios 是一个基于 Promise 的 HTTP 库,用于浏览器和 Node.js环境。它允许您轻松地进行 HTTP 请求,并在现代浏览器中利用了一些特性,如 XMLHttpRequests Level 2。Axios 提供了一种简单的方式来发送请求和接收响应,并且可以在不改变原有代码的情况下,无缝地在浏览器和服务器之间切换。

    Axios的历史背景

    Axios 的灵感来自于 jQuery 的 $.ajax 方法,但它被构建为一个独立的库,以提供更好的性能和更简洁的API。它最初是由 Matt Zabriskie 在 2014 年开发,并且自那时以来一直积极维护和发展。

    Axios的用途

    Axios 主要用于前端开发中与服务器的通信,它可以方便地发起任何 HTTP 请求,如 GET、POST、PUT、DELETE 等。由于其轻量级、易用性和强大的功能,Axios 成为了许多前端开发者在构建单页应用程序(SPA)时的首选工具。

    Axios相较于其它请求库的优势

    与其他HTTP客户端相比,Axios 有以下几个显著的优点:

    - 直观易用: Axios 提供了一个简洁而直观的 API,使得发起和接收 HTTP 请求变得非常容易。

    - 跨浏览器兼容: Axios 在老版本浏览器(如 IE9)上同样可用,这得益于它的 Promise 底层实现。

    - 灵活性: Axios 支持请求和响应拦截器,允许您在发送请求之前或之后执行一些操作。

    - 取消请求: Axios 提供了一个 CancelToken API,使您能够取消正在进行的请求。

    - TypeScript支持: Axios 具有 TypeScript 类型定义,这对于使用 TypeScript 开发的项目特别有利。

    - 社区支持: Axios 有一个庞大的用户社区和活跃的维护者,这意味着您可以找到大量的文档和示例,而且库本身将持续更新和改进。

    安装Axios

    Axios 可以通过多种方式安装,最常用的是使用 npm 或 yarn。以下是安装命令:


    # 使用npm
    
    npm install axios
    
    
    
    # 使用yarn
    
    yarn add axios


    如果您不熟悉包管理器,也可以直接将 axios.min.js 文件包含在您的 HTML 中,如下:


    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>


    最基本的请求示例

    使用 Axios 发起一个 GET 请求非常简单。以下是一个基本的例子:


    import axios from 'axios';
    
    
    
    axios.get('/api/data')
    
     .then(response => {
    
       console.log('Data:', response.data);
    
     })
    
     .catch(error => {
    
       console.error('Error:', error);
    
     });


    在这个例子中,我们首先导入 axios,然后使用 axios.get() 方法发起一个 GET 请求。.then() 方法用于处理响应数据,.catch() 方法用于捕获并处理可能出现的错误。

    发起一个 POST 请求也很容易,只需要替换方法名并提供额外的 data 参数:


    axios.post('/api/data', {
    
     name: 'John Doe',
    
     email: 'john.doe@example.com'
    
    })
    
    .then(response => {
    
     console.log('Posted data:', response.data);
    
    })
    
    .catch(error => {
    
     console.error('Error posting data:', error);
    
    });


    从响应中获取数据

    Axios 的 .then() 方法返回一个 Promise,该 Promise 解决时会返回响应对象。响应对象具有以下属性:

    - status: HTTP 状态码。

    - data: 服务器返回的数据。

    - headers: 响应头信息。

    - config: 发出请求时的配置对象。

    如果需要访问响应头或状态码,你可以这样做:


    axios.get('/api/data')
    
     .then(response => {
    
       console.log('Status code:', response.status);
    
       console.log('Headers:', response.headers);
    
       console.log('Data:', response.data);
    
     })
    
     .catch(error => {
    
       console.error('Error:', error);
    
     });


    错误处理

    当发生错误时,Axios 会抛出一个异常,可以使用 .catch() 方法来捕获和处理它:


    axios.get('/api/data')
    
     .then(response => {
    
       // 处理正常响应
    
     })
    
     .catch(error => {
    
       if (error.response) {
    
         // 请求已发出,但服务器返回错误响应
    
         console.error('Error response:', error.response.data);
    
       } else if (error.request) {
    
         // 请求失败,可能是网络问题
    
         console.error('Request failed:', error.request);
    
       } else {
    
         // 其他错误,如配置问题
    
         console.error('Error:', error.message);
    
       }
    
     });


    在 .catch() 中,error 对象包含了有关错误的信息,包括 response(如果有)、request 和错误消息。

    请求配置

    每次发起 Axios 请求时,都可以提供一个 config 对象来定制请求的各个方面。以下是请求配置的主要选项:

    baseURL

    如果您的 API 有一个固定的基地址,可以设置 baseURL 以便在每次请求时自动添加该前缀。例如:


    const instance = axios.create({    
    
       baseURL: 'https://api.example.com/v1/'
    
    });
    
    
    
    instance.get('users') // 将请求 https://api.example.com/v1/users


    url

    指定请求的资源路径。当 baseURL 被设置时,url 可以省略前面的基地址部分。


    axios.get('/users') // 请求当前域名下的 /users 资源


    method

    定义请求方法。默认为 GET。支持 POST、PUT、DELETE、HEAD、OPTIONS 等。


    axios({
    
     method: 'put',
    
     url: '/user/123',
    
     data: {
    
       name: 'New Name'
    
     }
    
    });


    headers

    设置请求头。默认情况下,Axios 会为 JSON 格式的请求体自动设置 Content-Type 为 application/json。


    axios.get('/users', {
    
     headers: {
    
       'Authorization': 'Bearer my-api-token',
    
       'Accept': 'application/json'
    
     }
    
    });


    params

    用于 GET 请求的查询参数。对于其他请求方法,使用 data 属性。


    axios.get('/users', {
    
     params: {
    
       page: 1,
    
       limit: 10
    
     }
    
    });


    data

    用于 POST、PUT、DELETE 等请求的请求体数据。


    axios.post('/users', {
    
     name: 'John Doe',
    
     email: 'john.doe@example.com'
    
    });


    响应配置

    除了请求配置之外,我们还可以配置如何接收和处理响应。

    responseType

    响应类型可以设置为 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' 或者 'urlencode'。默认为 'json'。


    axios.get('/download', {
    
     responseType: 'blob'
    
    }).then(response => {
    
     // 处理二进制数据
    
    });


    onDownloadProgress

    监听下载进度的函数,返回一个 ProgressEvent 对象,包含 loaded、total 等属性。


    axios.get('/largefile', {
    
     onDownloadProgress: progressEvent => {
    
       console.log(`已下载 ${progressEvent.loaded} 字节`);
    
     }
    
    });


    validateStatus

    自定义响应状态码的验证逻辑。如果返回 false,则请求将会被看作是一个错误。


    axios({
    
     method: 'get',
    
     url: '/api/data',
    
     validateStatus: status => {
    
       // 如果状态码是 400,则认为请求成功
    
       if (status === 400) {
    
         return true;
    
       }
    
       // 其他情况下按照常规处理
    
       return status >= 200 && status < 300;
    
     }
    
    });


    自定义实例化配置

    可以创建一个新的 Axios 实例,并为其指定特定的配置。


    const instance = axios.create({
    
     baseURL: 'https://api.example.com/',
    
     timeout: 1000,
    
     headers: {
    
       'X-Custom-Header': 'value'
    
     }
    
    });


    链式调用

    可以利用 Promise 的链式调用特性来执行多个并发请求。


    axios
    
     .get('/api/users')
    
     .then(response => {
    
       console.log('Users:', response.data);
    
       return axios.get('/api/posts', { params: { author: response.data.id } });
    
     })
    
     .then(response => {
    
       console.log('Posts:', response.data);
    
     })
    
     .catch(error => {
    
       console.error('Error:', error);
    
     });


    添加拦截器

    Axios 提供了 axios.interceptors 属性来注册请求和响应拦截器。可以通过调用 axios.interceptors.request.use 和 axios.interceptors.response.use 方法来添加拦截器。

    请求拦截器

    请求拦截器可以在请求发送之前对其进行修改,例如添加认证令牌、处理加载状态等。


    axios.interceptors.request.use(function (config) {
    
     // 在这里添加一些通用逻辑,比如获取 token 并添加到请求头
    
     const token = localStorage.getItem('token');
    
     if (token) {
    
       config.headers.Authorization = `Bearer ${token}`;
    
     }
    
     
    
     // 返回更新后的配置
    
     return config;
    
    }, function (error) {
    
     // 处理请求错误
    
     return Promise.reject(error);
    
    });
    


    响应拦截器

    响应拦截器可以在响应接收之后进行处理,例如处理错误、解析数据格式等。


    axios.interceptors.response.use(function (response) {
    
     // 在这里添加一些通用逻辑,比如处理响应数据格式
    
     if (response.data && Array.isArray(response.data)) {
    
       return response.data.map(item => item.name);
    
     }
    
     
    
     // 返回原始响应
    
     return response;
    
    }, function (error) {
    
     // 处理响应错误
    
     return Promise.reject(error);
    
    });

    移除拦截器

    如果需要移除某个拦截器,可以使用 axios.interceptors.request.delete 和 axios.interceptors.response.delete 方法。


    // 假设上面的请求拦截器被赋予了变量 interceptors
    
    const interceptor = axios.interceptors.request.use(...);
    
    
    
    // 后期如果需要移除该拦截器
    
    axios.interceptors.request.delete(interceptor);


    通用的错误处理

    在实际项目中,通常需要对所有请求进行错误处理。可以使用响应拦截器来统一处理异常情况。


    axios.interceptors.response.use(
    
     response => response,
    
     error => {
    
       if (error.response) {
    
         // 对应后端约定的错误码进行处理
    
         switch (error.response.status) {
    
           case 401:
    
             // 未授权,跳转到登录页
    
             break;
    
           case 403:
    
             // 权限不足,提示用户
    
             break;
    
           default:
    
             // 其他错误,统一显示错误信息
    
         }
    
       } else if (error.message === 'Request failed with status code 404') {
    
         // 资源未找到,显示404页面
    
       } else {
    
         // 网络问题或其他未知错误,显示错误提示
    
       }
    
       return Promise.reject(error);
    
     }
    
    );


    权限验证

    在每个请求中都需要进行权限验证,可以在请求拦截器中检查用户 token 并在过期时刷新。


    axios.interceptors.request.use(config => {
    
     const token = localStorage.getItem('token');
    
     if (token) {
    
       config.headers['Authorization'] = `Bearer ${token}`;
    
     }
    
     
    
     // 如果 token 不存在或者过期,可以尝试刷新 token
    
     if (!token || tokenExpired(token)) {
    
       return new Promise((resolve, reject) => {
    
         axios.post('/refresh-token', {
    
           refresh_token: localStorage.getItem('refreshToken')
    
         }).then(response => {
    
           const { access_token } = response.data;
    
           if (access_token) {
    
             localStorage.setItem('token', access_token);
    
             config.headers['Authorization'] = `Bearer ${access_token}`;
    
             resolve(config);
    
           } else {
    
             reject(response);
    
           }
    
         }).catch(error => {
    
           console.error('Token refresh failed:', error);
    
           reject(error);
    
         });
    
       });
    
     }
    
     
    
     return config;
    
    });
    


    拦截器是 Axios 中非常强大的一个功能,它允许我们对请求和响应进行全局的管理与处理。通过拦截器,我们可以实现诸如权限验证、错误处理、数据格式转换等功能,极大地提高了我们的代码复用率和代码的可维护性。在实际项目中,合理使用拦截器能够使我们的前端架构更加健壮和灵活。

    带进度事件的请求

    如果你需要在请求过程中跟踪进度,例如上传文件时,可以使用 onUploadProgress 事件。


    axios.post('/upload', data, {
    
     onUploadProgress: progressEvent => {
    
       const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    
       console.log(`上传进度: ${percentCompleted}%`);
    
     }
    
    });
    


    取消操作(使用 CancelToken)

    在某些情况下,你可能希望取消一个正在进行的请求,例如用户点击了取消按钮。Axios 提供了 CancelToken 来支持取消操作。


    // 创建一个 CancelToken 的实例
    
    const cancelToken = axios.CancelToken;
    
    const source = cancelToken.source();
    
    
    
    // 发起请求时使用这个 CancelToken
    
    axios.get('/api/data', {
    
     cancelToken: source.token
    
    }).catch(error => {
    
     if (axios.isCancel(error)) {
    
       console.log('请求被取消:', error.message);
    
     }
    
    });
    
    
    
    // 当需要取消请求时,调用 source.cancel()
    
    source.cancel('操作已取消');
    


    自定义认证

    Axios 支持各种类型的认证方式,可以通过在请求头中添加相应的认证信息来实现。

    Basic Authentication


    axios.get('/private-api', {
    
     auth: {
    
       username: 'username',
    
       password: 'password'
    
     }
    
    });


    Bearer Token


    axios.get('/api/data', {
    
     headers: {
    
       Authorization: `Bearer ${token}`
    
     }
    
    });


    代理设置

    如果你需要从客户端通过代理服务器发送请求,可以使用 proxy 选项。


    axios.create({
    
     baseURL: 'https://example.com/api/',
    
     proxy: {
    
       host: 'localhost',
    
       port: 8080,
    
       auth: {
    
         username: 'proxy-username',
    
         password: 'proxy-password'
    
       }
    
     }
    
    });


    自定义请求头

    有时候我们需要为请求添加一些自定义的头部信息。


    axios.get('/api/data', {
    
     headers: {
    
       'Custom-Header': 'Value'
    
     }
    
    });


    使用URLSearchParams

    对于需要以 application/x-www-form-urlencoded 格式发送的数据,可以使用 URLSearchParams。


    const params = new URLSearchParams();
    
    params.append('param1', 'value1');
    
    params.append('param2', 'value2');
    
    axios.post('/api/data', params);


    跨域资源共享(CORS)

    在发起跨源请求时,Axios 默认会自动设置 Content-Type 为 application/json。如果后端需要进行 CORS 配置,则可能需要额外设置 Access-Control-Allow-Origin 等头部信息。

二维码加载中...
本文作者:DGF      文章标题: 关于Axios这一篇就够了
本文地址: https://arbays.com/post-240.html     本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论