axios请求和axios常见的请求方式

1、axios请求下载和引入

1.1、下载指令

可以直接用下面指令或者也可以查看axios中文文档：axios中文文档|axios中文网 | axios (axios-js.com)
 

npm install axios

可以简写成 ：npm i axios

1.2、axios的引入方式

import axios from  "axios"

2、请求封装(最简单封装)

2.1axios二次封装

api封装一

import axios from 'axios'

const instance = axios.create({
    baseURL: "请求地址",
    timeout: 1000,            //请求时间、1000是一秒
  });
  instance.interceptors.request.use(config => {
				const token =localStorage.getItem('token') // 替换为你的 Token
				if (token) {
					config.headers.Authorization =token
				}
				return config;
			  });
  // 添加请求拦截器
  instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response.data;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default instance

api封装二

import http from "api封装一的路径"

export const log1 =()=>http.get("请求地址")
export const log2 =(params)=>http.post("请求地址",params)
export const log3 =(id)=>http.delete(`请求地址/${id}`,id)

页面用法

import {log1,log2,log3,log4,log5} from "api封装二的路径"

用法

不带参数
log1().then((res) => {
  console.log(res);
})

带参数
log2({id:1}).then((res) => {
  console.log(res);
})

log3(1).then((res) => {
  console.log(res);
})

2.2axios二次封装，ts封装方式、ts的class封装

api封装一