axios使用的方法总结

1、get方式

let formData = {} //此乃入参数据   
 axios({
        method: "get",
        url: this.$config + "/qycqgz/importData",
        params: formData,  //这块注意入参的字段是params(王八的屁股--规定)
        headers: { //根据不同类型的数据进行调整---这是文件流数据
          "Content-Type":
            "multipart/form-data;boundary = " + new Date().getTime(),
        },
      })
        .then((res) => {
          console.log(res, "成功");
        })
        .catch(function (error) {
          console.log(error, "失败");
        });

2、get方式

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3、post方式

let formData = {} //此乃入参数据   
 axios({
        method: "get",
        url: this.$config + "/qycqgz/importData",
        data: formData,  //这块注意入参的字段是data(王八的屁股--规定)
        headers: { //根据不同类型的数据进行调整---这是文件流数据
          "Content-Type":
            "multipart/form-data;boundary = " + new Date().getTime(),
        },
      })
        .then((res) => {
          console.log(res, "成功");
        })
        .catch(function (error) {
          console.log(error, "失败");
        });

4、post方式

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

### Axios 使用教程及示例 #### 1. 基本概念 Axios 是一个基于 Promise 的 HTTP 客户端库,支持浏览器和 Node.js 环境下的 HTTP 请求操作。它提供了多种功能来简化前端与后端之间的通信过程。 --- #### 2. 发起基本请求 以下是发起 GET 和 POST 请求的简单示例: ```javascript // 发起GET请求 axios.get('https://api.example.com/data', { params: { id: 1 } }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); // 发起POST请求 axios.post('https://api.example.com/user', { name: 'John Doe', age: 30 }).then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` 上述代码展示了如何通过 `axios` 方法发送简单的 GET 和 POST 请求[^1]。 --- #### 3. 创建 Axios 实例并设置默认配置 为了提高可维护性和灵活性,可以创建自定义的 Axios 实例,并为其指定全局配置项: ```javascript const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 5000, headers: { Authorization: 'Bearer your_token' }, }); instance.get('/user').then(response => { console.log(response.data); }).catch(error => { console.error(error); }); ``` 此部分描述了如何利用 `axios.create()` 来初始化一个新的 Axios 实例以及其基础配置[^3]。 --- #### 4. 并发请求 当需要同时执行多个异步请求时,可以通过 `Promise.all()` 或者 Axios 提供的工具函数实现并发请求: ```javascript function getUserAccount() { return axios.get('/user/account'); } function getUserPermissions() { return axios.get('/user/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread((accountResp, permissionsResp) => { console.log(accountResp.data, permissionsResp.data); })).catch(errors => { console.error(errors); }); ``` 这里介绍了在实际应用中如何高效地管理多线程任务的需求场景。 --- #### 5. 封装 API 接口 对于大型项目而言,通常会将所有的网络请求逻辑集中在一个模块里统一管理。以下是一个常见的封装模式: ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000, }); export function login(data) { return service({ url: '/auth/login', method: 'post', data, }); } export function fetchUserList(params) { return service({ url: '/users/list', method: 'get', params, }); } ``` 这种写法能够显著提升代码复用率和清晰度[^5]。 --- #### 6. 配置拦截器 拦截器允许我们在请求发出前或者接收到响应之后对其进行修改或增强处理能力: ```javascript service.interceptors.request.use(config => { config.headers['X-Token'] = localStorage.getItem('token'); // 添加Token验证头信息 return config; }, error => { return Promise.reject(error); }); service.interceptors.response.use(response => { return response.data; // 自动解析返回的数据体 }, error => { if (error.response.status === 401) alert('未授权!'); return Promise.reject(error); }); ``` 以上片段说明了如何添加请求与响应阶段各自的钩子函数以便于进一步定制行为。 --- #### 7. 错误重试机制 借助第三方插件 **retry-axios** 可以为失败的任务提供自动重新尝试的机会: 安装依赖包: ```bash npm install --save retry-axios ``` 使用样例: ```javascript const ra = require('retry-axios'); ra.attach(); const client = axios.create(); client.defaults.ra.retryDelay = 500; client.get('http://example.com/fail') .catch(err => { console.log(`Retried ${err.config.ra.retriedCount} times`); }); ``` 该段落解释了关于错误恢复策略的具体实践方案[^4]。 --- #### 总结 综上所述,Axios 不仅具备强大的核心特性还拥有丰富的扩展可能性,无论是初学者还是高级开发者都能从中受益匪浅。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值