Vue项目axios的引入

最新推荐文章于 2024-09-20 10:38:19 发布

谛听

最新推荐文章于 2024-09-20 10:38:19 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签：前端 http vue.js

本文链接：https://blog.csdn.net/HH921227/article/details/104030660

版权

本文详细介绍了在Vue项目中如何引入和使用axios，包括其基本特性、使用方法、插件应用以及在Vue组件内的具体操作，旨在帮助开发者更好地理解和应用axios进行http请求。

摘要由CSDN通过智能技术生成

`axios`简介

axios官网：易用、简洁且高效的http库。axios官网

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

axios的特性

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

`axios`的使用

axios引入

yarn add axios;
npm install axios;
<script src="https://unpkg.com/axios/dist/axios.min.js" defer />

axios示例

yarn add axios;
npm install axios;
<script src="https://unpkg.com/axios/dist/axios.min.js" />
// 使用
axios.get('/config?id=123')
  .then(res => {
   
  	console.log(res);
  })
axios.post('/config', {
   id: 123})
  .then(res => {
   
  	console.log(res);
  })
axios({
   
  method: 'post',
  url: '/config',
  data: {
   
    id: 123
  }
})

axios的options内容

{
   
   // `url` 是用于请求的服务器 URL
  url: '/config',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
   
    // 对 data 进行任意转换处理
    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
   
    // 对 data 进行任意转换处理
    return data;