Axios基础用法

axios全局配置

配置公共的请求头
axios.defaults.baseURL = ‘https://api.example.com’;
配置 超时时间
axios.defaults.timeout = 2500;
配置公共的请求头
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
配置公共的 post 的 Content-Type
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;

一、传递参数

1、发送get请求

<script>
       axios.get("http://localhost:2020/udata").then((ret)=>{
               // 拿到ret是一个对象 所有的对象都存在ret 的data属性里面
              // 注意data属性是固定的用法，用于获取后台的实际数据
              // console.log(ret.data)
              console.log(ret)
       })
</script>

2、get 请求传递参数

// 通过传统的url  以 ? 的形式传递参数
axios.get('http://localhost:3000/axios?id=123').then(function(ret){
  console.log(ret.data)
})
// restful 形式传递参数 
axios.get('http://localhost:3000/axios/123').then(function(ret){
  console.log(ret.data)
})
// 通过params  形式传递参数 
axios.get('http://localhost:3000/axios', {
  params: {
    id: 789
  }
}).then(function(ret){
  console.log(ret.data)
})

3、axios delete 请求传参 传参的形式和 get 请求一样

axios.delete('http://localhost:3000/axios', {
  params: {
    id: 111
  }
}).then(function(ret){
  console.log(ret.data)
})

4、axios 的 post 请求

// 通过选项传递参数
axios.post('http://localhost:3000/axios', {
  uname: 'lisi',
  pwd: 123
}).then(function(ret){
  console.log(ret.data)
})
// 通过 URLSearchParams  传递参数 
var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '111');
axios.post('http://localhost:3000/axios', params).then(function(ret){
  console.log(ret.data)
})

5、axios put 请求传参 和 post 请求一样

axios.put('http://localhost:3000/axios/123', {
  uname: 'lisi',
  pwd: 123
}).then(function(ret){
  console.log(ret.data)
})

二、axios 拦截器

1、请求拦截器

// 请求拦截器的作用是在请求发送前进行一些操作
//  列如在每个请求体内加上token，统一做了处理如果以后要改也非常容易

axios.interceptors.request.use(function(config) {
  console.log(config.url)
  // 任何请求都会经过这一步   在发送请求之前做些什么   
  config.headers.mytoken = 'nihao';
  // 这里一定要return   否则配置不成功  
  return config;
}, function(err){
  // 对请求错误做点什么    
  console.log(err)
})

2、响应式拦截器

// 响应拦截器的作用是在接收到响应后进行一些操作
// 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

axios.interceptors.response.use(function(res) {
  // 在接收响应做些什么  
  var data = res.data;
  return data;
}, function(err){
  // 对响应错误做点什么  
  console.log(err)
})

三、async await 基本用法

• async作为一个关键字放到函数前面
  任何一个async函数都会隐式返回一个promise

• await关键字只能在使用async定义的函数中使用
  await后面可以直接跟一个 Promise实例对象
  await函数不能单独使用

处理多个异步请求:

async function queryData() {
  //  添加await之后 当前的await 返回结果之后才会执行后面的代码   
  var info = await axios.get('async1');
  // 让异步代码看起来、表现起来更像同步代码
  var ret = await axios.get('async2?info=' + info.data);
  return ret.data;
}
queryData().then(function(data){
  console.log(data)
})