axios的使用和es7async-await关键字

本文简介：

完成对axios基本使用方法的简介，学习在es7中如何使用async await处理异步请求

---

---

一、配置axios请求

//配置axios请求前缀地址
axios.defaults.baseURL = 'http://jx.xuzhixiang.top/ap/api';

二、使用axios发送请求

注意：在发送get请求和post请求时，请求的参数的传递方式不同，get请求参数必须包含在prams{}对象里面

1.使用axios发送get请求

axios
  .get('http://jx.xuzhixiang.top/ap/api/login.php', {
    params: {
      username: 'admin',
      password: '123456',
    },
  })
  .then((res) => {
    console.log(res)
  })
  .catch((errr) => {
    console.log(arr)
  })

2.使用axios发送post请求

axios
  .post('http://jx.xuzhixiang.top/ap/api/login.php', {
    username: 'zhangsan',
    password: '1234',
  })
  .then(function (res) {
    console.log(res.data)
  })

三、es7中async和await关键字

注：将异步代码–>同步代码

1.使用ajax搭配es7语法(不推荐使用)

 // 回调地狱的终极解决方案
      async function regAndLogin() {
        // 函数的内部就可以使用 await 等待
        // await 后面是prmise 对象， 等这个对象 成功以后 ，代码才会往下执行
        let res1 = await new Promise(function (resolve, reject) {
          ajax({
            url: 'http://jx.xuzhixiang.top/ap/api/login.php',
            data: {
              username: '11',
              password: '1212',
            },
            success(res) {
              console.log('登录成功')
              resolve(res)
            },
          })
        })
        console.log(11)
        console.log(res1)
      }
      regAndLogin()

---

2.使用axios请求搭配es7语法(常用)

//axios返回的是promise对象
async function regAndLogin() {
    // 函数的内部就可以使用 await 等待
    // await 后面是prmise 对象， 等这个对象 成功以后 ，代码才会往下执行
    let res1 = await axios.get('http://jx.xuzhixiang.top/ap/api/reg.php', {
        params: {
            username: 'zhangsan',
            password: 12345
        }
    })
    console.log(11);
    console.log(res1.data);
    let res2 = await axios.get('http://jx.xuzhixiang.top/ap/api/login.php', {
        params: {
            username: 'zhangsan',
            password: 12345
        }
    })
    console.log(res2.data);
}

3.对axios请求失败的情况进行处理

try{

}catch(error){
	console.log(error+"数据请求失败")
}

---

四、在vue中使用axios请求方式

1.安装使用

//npm install axios

//在main.js中插入以下代码
import axios from 'axios'
import router from './router/router.js'
// 使用axios--挂载到vue原型对象上
Vue.prototype.$axios = axios
//配置基本地址
axios.defaults.baseURL = 'https://api.cat-shop.penkuoer.com/api/v1/'
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')