认识axios

Posted 2021-05-30 107w

认识axios

axios的基本使用

axios({
  url: "http://123.207.32.32:8000/home/multidata"
}).then(res => {
  console.log(res);
})

axios({
  url: "http://123.207.32.32:8000/home/data",
  params: {
    type: \'pop\',
    page: 1
  }
}).then(res => {
  console.log(res);
})

axios发送并发请求

使用axios.all,可以放入多个请求的数组，

axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1, res2]展开为res1, res2

axios.all([
  axios({
    url: "http://123.207.32.32:8000/home/multidata"
  })
],
  axios({
    url: "http://123.207.32.32:8000/home/data",
    params: {
      type: \'pop\',
      page: 1
    }
  })).then(results => {
    console.log(results);
    console.log(results[0]);
    console.log(results[1]);
  })

axios.spread展开函数

axios.all([
  axios({
    url: "http://123.207.32.32:8000/home/multidata"
  })
],
  axios({
    url: "http://123.207.32.32:8000/home/data",
    params: {
      type: \'pop\',
      page: 1
    }
  })).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
  }))

全局配置

在开发中很多参数都是固定的，

这个时候我们可以进行一些抽取，利用axios的全局配置

axios.defaults.baseURL = "http://123.207.32.32:8000"
axios.defaults.timeout = 5000

axios.all([
  axios({
    url: "/home/multidata"
  })
],
  axios({
    url: "/home/data",
    params: {
      type: \'pop\',
      page: 1
    }
  })).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
  }))

配置选项注意事项：

methods: \'get\' -> params: {id: 12}

get请求只能传params，最后会把params里面的东西以？的形式拼接到url后面

methods: \'post\' -> data: {key: \'aa\'}（request body 请求体）

post请求把请求参数放在请求体里面

创建对应axios实例

(数据请求不同的IP地址，就不能用全局配置了)

const instance1 = axios.create({
  baseURL: \'http://123.207.32.32:8000\',
  timeout: 5000
})

instance1({
  url: \'/home/multidata\'
}).then(res => {
  console.log(res);
})

instance1({
  url: \'/home/data\',
  params: {
    type: \'pop\',
    page: 1
  }
}).then(res => {
  console.log(res);
})

const instance2 = axios.create({
  baseURL: \'http://222.111.33.33:8000\',
  timeout: 10000,
  // headers: {}
})

instance2({
  url: \'...\',
})

对axios框架进行封装

万一有一天框架不维护了，可以只修改封装的文件，

如果不封装，在很多文件都引用框架，修改会超麻烦

专门创建一个文件夹network

方式一

request.js下的代码

import axios from \'axios\'
export function request(config, success, failure) {
  //创建axios实例
  const instance = axios.creat({
    baseURL: \'http://123.207.32.32:8000\',
    timeout: 5000
  })

  //发送真正的网络请求
  instance(config)
    .then(res => {
      // console.log(res);
      success(res)
    })
    .catch(err => {
      // console.log(err);
      failure(err)
    })
}

main.js下的代码

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

方式二

request.js下的代码

import axios from \'axios\'
export function request(config) {
  //创建axios实例
  const instance = axios.create({
    baseURL: \'http://123.207.32.32:8000\',
    timeout: 5000
  })

  //发送真正的网络请求
  instance(config.baseConfig)
    .then(res => {
      // console.log(res);
      config.success(res)
    })
    .catch(err => {
      // console.log(err);
      config.failure(err)
    })
}

main.js下的代码

import { request } from "./network/request"
request({
  baseConfig: {
    url: "/home/multidata"
  },
  success: function (res) {
    console.log(res);
  },
  failure: function (err) {
    console.log(err);
  }
})

方式三

request.js下的代码

import axios from \'axios\'
export function request(config) {
  return new Promise((resolve, reject) => {
    //创建axios实例
    const instance = axios.create({
      baseURL: \'http://123.207.32.32:8000\',
      timeout: 5000
    })

    //发送真正的网络请求
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  })
}

main.js下的代码

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

方式四

request.js下的代码

import axios from \'axios\'
export function request(config) {

  //创建axios实例
  const instance = axios.create({
    baseURL: \'http://123.207.32.32:8000\',
    timeout: 5000
  })

  //发送真正的网络请求
  return instance(config)
}

main.js下的代码

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

axios拦截器

axios提供了拦截器，用于我们在每次请求或得到响应后，进行对应的处理

request.js下的代码

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);
    return res.data
  },err => {
    console.log(err);
  })

  //3.发送真正的网络请求
  return instance(config)
}

main.js下的代码

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