Axios 好用的http请求库

CDN

使用 jsDelivr CDN:

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

使用 unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

GET

async function exists(loginId) {
  return await ins.get("/api/exists", {
    params: {
      loginId,
    },
  });
}

GET:配置请求参数需要第二个参数,添加params对象,参数为请求参数,Axios 会将 params 参数转化为查询字符串（query string）并添加到 URL 的末尾。

POST

async function reg(loginId, loginPwd, nickname) {
  return await ins.post("/api/user/reg", {
    loginId: loginId,
    loginPwd: loginPwd,
    nickname: nickname,
  });
}

通过 axios.post 方法发送了一个 POST 请求，并在 data 参数中传递了一个对象。在请求发送时，Axios 会将这个对象自动转化为 JSON 字符串，并将其作为请求体发送。需要注意的是，Axios 会自动设置请求头的 Content-Type 字段为 application/json;charset=UTF-8，以告知服务端请求体的数据格式

默认配置

1. 全局默认默认值

axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

3. 自定义实例默认值

const ins = axios.create({
  baseURL: "http://127.0.0.1:4523/m1/2429576-0-default",
});

默认baseUrl

拦截器

发送,和响应可以让axios 拦截,帮我做一些事情,发送请求可以附带token,接受请求存储token

response

// 统一处理：拦截器
// 添加响应拦截器
ins.interceptors.response.use(
  function (resp) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    // 服务器给了授权码，我需要保存它
    const token = resp.headers.authorization;
    if (token) {
      localStorage.setItem('token', token);
    }
    if (resp.data.code !== 0) {
      alert(resp.data.msg);
    }
    return resp.data.data; // 仅得到响应体中的data属性
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    alert(error.message); // 弹出错误消息
  }
);

request

// 添加请求拦截器
ins.interceptors.request.use(function (config) {
  // config 为当前的请求配置
  // 在发送请求之前做些什么
  // 这里，我们添加一个请求头
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.authorization = `Bearer ${token}`;
  }
  return config; // 返回处理后的配置
});