axios使用 - 爱码网

第一步：安装

npm i -S axios

第二步：导入后直接使用

axios使用

解决跨域请求的问题

axios使用

拦截器：包括请求拦截器和相应拦截器

axios使用

完整代码：

import axios from 'axios'
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    // console.log(config);
    // 可以在这里做一些其他的操作
    // 1.比如config中的一些信息不符合服务器的要求
    // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
    // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
    return config // 必须要返回配置信息
  }, err => {
    // console.log(err);
  })
  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    // console.log(res);
    // 可以直接返回res，也可以只返回自己需要的有用信息即res.data
    // 但是必须要有返回
    return res.data
  }, err => {
    console.log(err);
  })
  // 3.发送真正的网络请求
  return instance(config)
}

使用：

import {request} from "./network/request";
request({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  // console.log(err);
})