axios入门指南与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_49171551/article/details/127173676

本文介绍了如何安装axios，包括npm、bower和cdn三种方式。详细讲解了axios的常用配置对象，如请求路径、方式、参数、请求头等，并强调了axios的特性，如基于Promise、自动转换请求头数据格式。此外，还阐述了axios的异步请求方法（get和post）以及如何使用promise。最后，讨论了axios的实例创建、全局配置和拦截器的使用，以及如何封装axios。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装axios

1.使用npm：$ npm install axios

2.使用bower：$ bower install axios

3.使用cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、axios中常用的配置对象有哪些

axios({

url:'' //请求路径，

methods:'' //请求方式

params:{}, //get携带参数

data:{}, //post携带参数

headers:{} //请求头

timeout：1000 // 表示请求超过timeouts时间没有响应就中断请求

responseType: 'json' //规定后端返回的数据格式

})

三、axios的特点

1.axios的默认请求是get请求，默认数据格式是json格式

2.基于promise的http库

3.可以调用promise的api

4.axios请求头的数据格式会自动转化

四、axios发送异步请求是的请求方式

1.get方法：get方法包括有参和无参两种情况

<body>
  <script>
    // get无参，直接写入url地址
    axios({
      url:'http://...'
    })
    // get有参，将参数存在params中
    axios({
      url:'http://',
      // 在params中会自动将对象参数转化成查询字符串
      params:{
        page:1,
        pageSize:10
      }
    })
  </script>
</body>

2.post方法：post方法包括无参和有参，有参中又分为JSON型的还是表单型的

<body>
  <script>
    // post请求
    // 无参
    axios({
      url:'http:...'
    });
    // 有参且参数是查询字符串的形式
    axios({
      url:'http://...',
      method:'post',
      // 参数会自动转化成JSON字符串
      data:{
        username:'hh',
        password:123
      }
    });

    // 有参且是表单格式
    axios({
      url:'http://...',
      method:'post',
      headers:{
        // 请求头中的数据格式可以不写会自动补全
        'Content-type':'application/xxx-www-form-urlencoded'
      },
      data:Qs.stringify({
        name:'查询'
      })
    })
  </script>
</body>

五、axios调用promise中的实例方法

<body>
  <script>
    axios({
      url:'http://...',
      method:'post',
      data:Qs.stringify({
        name:'查询'
      })
    }).then(res=>{
      console.log(res,'获取成功');
    }).catch(err=>{
      console.log(err,'获取失败');
    }).finally(()=>{
      console.log('最终执行');
})
  </script>
</body>

六、axios的快捷方法

<body>
    <script>
      // axios的快捷方法有  get delete post head options patch put  axios.get(url[,data])
      // 其中get delete head options请求方法一致   post put patch请求方法一致  axios.post(url[,data[,config]])有逗号的表示可选
      let url='http://...'
      let token='...'
      let data={
        name:'查询'
      }
      let params={
        username:'admin1',
        password:123321
      }
      // get
      axios.get(url,params)
      // post
      axios.post(url,Qs.stringify(data),{
        hesders:{
          'Autorization':token
        }
      }).then(res=>{
        console.log(res,'axios封装的响应');
      })

    </script>
</body>

七、axios实例和全局配置

<body>
  <script>
    // create里面的都是公共需求的
    let instance = axiso.create({
      baseURL: 'http://...',
      timeout: 5000,
      headers: {
        'Authorization': '123'
      },
    });
    // url=baseURL + '/user/login'  自动拼接
    instance.post('/user/login', {
      username: 'hhh',
      password: 123
    }).then(res => {
      console.log(res);
    })


    // 全局配置axios默认配置项  给所有请求添加一些默认配置项
    axios.default.baseURL = 'http://...';
    axios.default.headers.common['Authorization'] = '123456'
  </script>
</body>

八、axios拦截器：拦截器有请求拦截器和响应拦截器

<body>
  <script>
    axios.default.baseURL = 'http://...';
    // 请求拦截器
    axios.interceptors.request.use(config => {
      // 在请求拦截器里面设置如果请求地址不是登录的地址，手动在请求头里面加入token
      if (config.url !== '/user/login') {
        config.headers.Authorization = '.....'
      }
      return config
    }, error => {
      return Promise.reject(error);
    })
    // 响应拦截器
    axios.interceptors.response.use(response => {
      // 将怒需要的数据过滤掉，返回的resonse并不是后台返回的数据，而是axios封装的数据，response里面的data才是后台返回的值
      let res = response.data
      return res
    }, error => {
      return Promise.reject(error);
    });

    // 发送登录请求
    axios.post('/user/login', {
      username: 'hh',
      password: 123
    }).then(res => {
      console.log(res);
    });
    // 发送非登录请求
    axios.get('/caruosel/findAll').then(res => {
      console.log(res);
    })
  </script>
</body>

九、封装axios

1.下载axios

npm i -S axios

2.将axios引入封装的文件

import axios from 'axios'

3.创建一个axios实例

4.设置请求拦截

5.设置响应拦截

6.进行封装方法

7.导出整个实例

import axios from 'axios';
import Qs from 'qs';
let qs = Qs;
// 1.创建一个axios实例
let instance = axios.create({
  baseURL: 'http://...',
  timeout: 5000,
});
// 2.请求拦截器
instance.interceptors.request.use(config => {
  if (config.url !== '/user/login') {
    config.headers.Authorization = '....'
  }
  return config
}, error => {
  return Promise.reject(error)
});
// 3.响应拦截
instance.interceptors.response.use(response => {
  let res = response.data;
  return res;
}, error => {
  return Promise.reject(error)
});
// 封装get方法
export function get (url, params) {
  return instance.get(url, {
    params,
  })
};
// 封装post方法  json类型
export function postJSON (url, data) {
  return instance.post(url, data);
}
// 封装post方法   表单类型
export function post (url, data) {
  return instance.post(url, qs.stringify(data))
}
// 导出instance这个模块
export default instance

学习axios