Axios

简介

Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js , Axios 使用简单,包尺寸小且提供了易于扩展的接口。

特性

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

使用

安装

 npm install axios

CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

get 请求

• 发起一个 get 请求

axios({
  method: "get",
  url: "url",
}).then((res) => {
  console.log(res);
});

• 简写

axios.get("url").then((res) => {
  console.log(res);
});

post 请求

• 发起一个 post 请求

axios({
  method: "post",
  url: "url",
  data: {
    username: "rido",
    pwd: "123456",
  },
}).then((res) => {
  console.log(res);
});

• 简写

axios.post("url", {
    username: "rido",
    pwd: "123456",
  })
  .then((res) => {
    console.log(res);
  });

request封装

• request.js

import axios from 'axios'

// 创建一个实例
const instance =axios.create({
    baseURL: 'baseURL',
    timeout: 1000 
})

// 拦截器-请求拦截
instance.interceptors.request.use(config=>{
    // 在发送请求之前做些什么
    return config;
  }, error=> {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 拦截器-响应拦截
instance.interceptors.response.use(response=> {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, error=> {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default instance;

• api.js

import request from './request.js'

// 按需导出每个请求

// 导出一个get请求

export const GetApi =(id)=>request.get('/api',{params:id});

// 导出一个post请求

export const PostApi=(params)=>request.post('/api',params)

更多内容可以查看 https://www.axios-http.cn/

Q.E.D.