axios

axios文档

特点

• 支持客户端发送Ajax请求

• 支持服务端Node.js发送请求

• 支持Promise相关用法

• 支持请求和响应的拦截器功能

• 自动转换JSON数据

• axios 底层还是原生js实现, 内部通过Promise封装的

axios的基本使用

axios({
  method: '请求方式', // get post
  url: '请求地址',
  data: {    // 拼接到请求体的参数,  post请求的参数
    xxx: xxx,
  },
  params: {  // 拼接到请求行的参数, get请求的参数
    xxx: xxx 
  }
}).then(res => {
  console.log(res.data) // 后台返回的结果
}).catch(err => {
  console.log(err) // 后台报错返回
})
​

小结

1. 什么是ajax?

   1. 一种前端异步请求后端的技术

2. ajax原理?

   1. 浏览器window接口的XMLHttpRequest

3. axios是什么?

   1. 基于原生ajax+Promise技术封装通用于前后端的请求库

小结

1. axios如何发起一次get请求?

   1. 在method选项配置为true / 也可以默认不写

2. axios函数调用原地结果是什么?

   1. 是一个Promise对象

3. 如何拿到Promise里ajax的成功或失败的结果?

   1. then() / catch()

小结

1. ajax如何给后台传参?

   1. 在url?拼接–查询字符串

   2. 在url路径上–需要后端特殊处理

   3. 在请求体/ 请求头传参给后台

2. axios哪个配置项会把参数自动写到url?后面

   1. params

小结

1. post请求方式, 一般在哪里传递数据给后台?

   1. 请求体中

2. axios哪个选项, 可以把参数自动装入到请求体中?

   1. data选项

3. axios默认发给后台请求体数据格式是?

   1. json字符串格式

11.axios-全局配置

讲解

axios.defaults.baseURL = "http://123.57.109.30:3006"
​

小结

1. 想学习axios更多的知识应该去哪里?

   1. 官网多阅读, 多看多总结, 任何库和插件都是

2. axios如何配置基地址?

   1. axios.defaults.baseURL

12.配置axios默认信息 

// 1 导入axios
import Axios from 'axios';
// 2 配置默认的请求数据地址
Axios.default.baseURL = "https://www.101010.com";
// 3 注册原型
Vue.prototype.$Axios = Axios;