axios方式接口调用

接口调用方式

• 原生ajax

• 基于jQuery的ajax

• fetch

• axios

异步理解

• JavaScript的执行环境是「单线程」

• 所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程

• 异步模式可以一起执行多个任务

• JS中常见的异步调用

  • 定时任何

  • ajax

  • 事件函数

promise理解

• 主要解决异步深层嵌套的问题

• promise 提供了简洁的API 使得异步操作更加容易

• 可以看看以往我写过的学习笔记

axios基础用法

• 基于promise用于浏览器和node.js的http客户端

• 支持浏览器和node.js

• 支持promise

• 能拦截请求和响应

• 自动转换JSON数据

• 能转换请求和响应数据

• get和 delete请求传递参数

  • 通过传统的url 以 ? 的形式传递参数

  • restful 形式传递参数

  • 通过params 形式传递参数

• post 和 put 请求传递参数

  • 通过选项传递参数

  • 通过 URLSearchParams 传递参数

# 1. 发送get 请求 axios.get('http://localhost:3000/adata').then(function(ret){#  拿到 ret 是一个对象  所有的对象都存在 ret 的data 属性里面  // 注意data属性是固定的用法，用于获取后台的实际数据  // console.log(ret.data)  console.log(ret)})# 2.  get 请求传递参数# 2.1  通过传统的url  以 ? 的形式传递参数axios.get('http://localhost:3000/axios?id=123').then(function(ret){  console.log(ret.data)})# 2.2  restful 形式传递参数 axios.get('http://localhost:3000/axios/123').then(function(ret){  console.log(ret.data)})# 2.3  通过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 请求# 4.1  通过选项传递参数axios.post('http://localhost:3000/axios', {  uname: 'lisi',  pwd: 123}).then(function(ret){  console.log(ret.data)})# 4.2  通过 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全局配置#  配置公共的请求头 axios.defaults.baseURL = 'https://api.example.com';#  配置 超时时间axios.defaults.timeout = 2500;#  配置公共的请求头axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;# 配置公共的 post 的 Content-Typeaxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios拦截

• 请求拦截器

  • 请求拦截器的作用是在请求发送前进行一些操作

    • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

• 响应拦截器

  • 响应拦截器的作用是在接收到响应后进行一些操作

    • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

 # 1. 请求拦截器 axios.interceptors.request.use(function(config) {  console.log(config.url)  # 1.1  任何请求都会经过这一步在发送请求之前做些什么 config.headers.mytoken = 'nihao';  # 1.2  这里一定要retu否则配置不成功retu config;}, function(err){#1.3 对请求错误做点什么  console.log(err)})#2. 响应拦截器 axios.interceptors.response.use(function(res) {  #2.1  在接收响应做些什么var data = res.data;  retu data;}, function(err){  #2.2 对响应错误做点什么console.log(err)})

async 和 await

• async作为一个关键字放到函数前面

  • 任何一个async函数都会隐式返回一个promise

• await关键字只能在使用async定义的函数中使用

  • await后面可以直接跟一个 Promise实例对象

  • await函数不能单独使用

• async/await 让异步代码看起来、表现起来更像同步代码

# 1.  async 基础用法# 1.1 async作为一个关键字放到函数前面async function queryData() {  # 1.2 await关键字只能在使用async定义的函数中使用  await后面可以直接跟一个 Promise实例对象  var ret = await new Promise(function(resolve, reject){setTimeout(function(){  resolve('nihao')},1000);  })  // console.log(ret.data)  retu ret;}# 1.3 任何一个async函数都会隐式返回一个promise我们可以使用then 进行链式编程queryData().then(function(data){  console.log(data)})​#2.  async函数处理多个异步函数axios.defaults.baseURL = 'http://localhost:3000';​async function queryData() {  # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码var info = await axios.get('async1');  #2.2  让异步代码看起来、表现起来更像同步代码  var ret = await axios.get('async2?info=' + info.data);  retu ret.data;}​queryData().then(function(data){  console.log(data)})

.