1.Vue.js Ajax(axios)

npm下载使用：

npm install –save axios vue-axios

在入口文件导入axios：

1
2
import axios from 'axios'  
axios.defaults.baseURL = 'http://timemeetyou.com:8889/api/private/v1/'        // 配置请求的根路径

设置 Vue.prototype.$http 为 axios 的别名：

1
Vue.prototype.$http = axios

然后就可以在项目中的Vue 实例中使用类似 this.$http.get 的方法：

1
const{ data : res}= await this.$http.get('users')
这里的{data : res}将请求返回的数据data解构赋值为对象res中

2.async/await

async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。

async语法

1
async function name([param[, param[, ... param]]]) { statements }
  • name: 函数名称。
  • param: 要传递给函数的参数的名称。
  • statements: 函数体语句。

async 函数返回一个 Promise 对象，所以使用await:

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

await针对所跟不同表达式的处理方式：

  • Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
  • 非 Promise 对象：直接返回对应的值。
例如获取一个用户列表：

未使用async/await的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
getUserList(){
      this.$http.get('users',{
        // params:this.queryInfo
        params:{
          query:this.queryInfo.query,
          pagenum:this.queryInfo.pagenum,
          pagesize:this.queryInfo.pagesize
        }
      }).then(response =>{               //是用.then执行接下来的步骤，如果剩下的操作中仍有若干请求，则会发生回调地狱
        const res=response.data
        console.log(res)
        if(res.meta.status !==200){
          return this.$message.error('获取用户列表失败')
        }
        console.log(res)
        this.userlist=res.data.users
        this.total=res.data.total
      })
    },

如果使用async/await:

异步请求同步化处理 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
async getUserList(){                                       //函数名前加上async关键字
      const{data : res}= await this.$http.get('users',{     //在要需要等待的异步操作前使用await关键字
        // params:this.queryInfo
        params:{
          query:this.queryInfo.query,
          pagenum:this.queryInfo.pagenum,
          pagesize:this.queryInfo.pagesize
        }
      })                                                    //因为使用了async/await，所以当函数执行到这里时，函数一定已经获取到了data数据.所以不需要使用.then了
      console.log(res)
      if(res.meta.status !==200){
        return this.$message.error('获取用户列表失败')
      }
      console.log(res)
      this.userlist=res.data.users
      this.total=res.data.total
    }