axios 用例

为了在CommonJS中使用require()导入时获得TypeScript类型推断（智能感知/自动完成），请使用以下方法：

const axios = require('axios').default;

// axios. 能够提供自动完成和参数类型推断功能

GET 请求

发起一个 GET 请求：

const axios = require('axios');

// 在vue中引用如下：
import axios from 'axios'


// 向给定ID的用户发起请求
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

上述请求也可以按以下方式完成（可选）

// 在vue中引用如下：
import axios from 'axios' axios.get('/user', { params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  }); 

支持async/ await用法

import axios from 'axios' async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

注意：由于async/await是ECMAScript 2017中的一部分，而且在 IE 和一些旧的浏览器中不支持，所以使用时务必要小心。

POST 请求

发起一个 POST 请求

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

多个并发请求

import axios from 'axios'

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

vue3 安装及使用 axios

安装axios

npm install axios

Vue3配置axios跨域实现过程解析

//vue3 根目录下 vue.config.js文件
module.exports = {
  devServer: {
    proxy: {
      '/api/': {
            target: 'https://www.test.com/', //接口域名 changeOrigin: true,		//是否跨域 ws: true,				//是否代理 websockets secure: true,			//是否 https 接口
            pathRewrite: {			//路径重置
                  '^/api': ''
            }
      }
    }
  }
};

将api接口放入请求的 url 中

 
 
TEST
 
{{data}}
 
 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com