axiosaxios的基本使用

Posted 2023-04-04 whu-水草

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了axiosaxios的基本使用相关的知识，希望对你有一定的参考价值。

axios是一个专注于网络请求的库。 不同于jquery，功能复杂，既可以操作dom，又可以做动画，还可以发ajax请求。axios是一个专注于网络请求的库。

一、基本使用

1.导入库文件

在js中导入axios的库文件后，会直接在全局挂载一个axios方法，就可以直接使用了。

<!-- 导入axios的库文件 -->
<script src="lib/axios.js"></script>
<script>
    console.log(axios);
</script>

在控制台打印axios可以看到，它是一个方法，我们现在就可以直接使用了。

2.基本语法

axios(
   //请求方式，'GET'或者'POST'
    method: 'GET',
    //请求地址
    url: ''
).then(res => )

axios方法获取的结果是一个Promise对象，测试如下：

const res = axios(
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/getbooks'
)
console.log(res);

既然是一个Promise对象，那么就可以通过 .then的方式拿到获取成功后的结果了。

axios(
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/getbooks'
).then(res => console.log(res))

可以看到获取成功了。到此为对基本语法的使用解释。

3.结果分析

但是，axios方法拿到的结果就是服务器请求到的结果吗？我们使用postman来测试一下。

postman显示的是服务器请求后拿到的返回结果。我们可以看到，和axios拿到的结果并不一样，经过比对，我们可以发现，axios拿到的对象结果中有一个data属性，那里面放着的才是服务器请求的真正的返回结果。

到此，我们可以得到axios拿到的对象结果和服务器请求的真正的返回结果之间的关系：

要想直接拿到真实数据的格式，只需要res.data。

4.参数传递

【基本语法】 params中写GET方法的传参，data中写POST方法的传参。

axios(
    //请求方式，'GET'或者'POST'
    method: 'GET',
    //请求地址
    url: '',
    //url中的查询参数，GET方法的传参
    params: ,
    //请求体参数，POST方法的传参
    data: 
).then(res => )

get传参演示：

axios(
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/getbooks',
    params: 
        id: 1
    ,
).then(res => console.log(res))

post传参演示：

axios(
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: 
        name: 'zs',
        age: 20
    ,
).then(res => console.log(res))

5.方法简化

（1）通过async和await的方式直接拿到返回值

因为axios方法获取的结果是一个Promise对象，所以我们可以通过async和await的方式直接拿到返回值，不需要再通过调用.then的方式了。

给’#btnGet’按钮绑定一个点击事件，点击后发起axios请求。通过async和await的方式可以直接拿到返回值。

document.querySelector('#btnGet').addEventListener('click', async function () 
    const res = await axios(
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
        // params: 
        //     id: 1
        // 
    )
    console.log(res);
)

（2）解构赋值拿到服务器请求到的真正数据
由第3小节我们知道，axios拿到的对象结果在服务器请求到的真正数据外面套了一层壳子，存在它的data属性中，我们可以通过对象解构的方式直接拿到服务器请求到的真正数据。

document.querySelector('#btnGet').addEventListener('click', async function () 
    const data = await axios(
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
    )
    console.log(data);
)

（3）解构赋值重命名
服务器请求到的真正数据有三个属性，data，status，msg，其中data是我们最关心的，存着需要的数据项，我们只希望取到这个data数组，这个比较简单，因为解构赋值已经拿到服务器请求到的真正数据了，并存在data变量中，所以只需要访问这个变量的data属性就能拿到，即data.data，但是这样很容易混淆，所以我们在解构赋值的时候给data换个名字 data: res 。

document.querySelector('#btnGet').addEventListener('click', async function () 
    const  data: res  = await axios(
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks',
    )
    console.log(res.data);
)

6.axios直接发起GET请求和POST请求

基本语法：

//axios直接发起GET请求
axios.get('url地址', 
    //GET参数
    params: 
)
//axios直接发起POST请求
axios.post('url地址',  //POST参数 )

示例：

document.querySelector('#btnGet').addEventListener('click', async function () 
    const  data: res  = await axios.get('http://www.liulongbin.top:3006/api/getbooks', 
        params: 
            id: 1
        
    )
    console.log(res.data);
)
document.querySelector('#btnPost').addEventListener('click', async function () 
    const  data: res  = await axios.post('http://www.liulongbin.top:3006/api/post', 
        name: 'zs',
        gender: '女'
    )
    console.log(res);
)

认识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);})

以上是关于axiosaxios的基本使用的主要内容，如果未能解决你的问题，请参考以下文章

认识axios

axios 全攻略之基本介绍与使用（GET 与 POST）