axios发送请求，一篇搞定

1、axios发送请求的方式

简写：

delete和get请求相似，put请求和post请求类似

// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345')  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });// 上面的请求也可以这样做axios.get('/user', {    params: {      ID: 12345    }  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  })axios.post('/user', {    firstName: 'Fred',    lastName: 'Flintstone'  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });
繁写：
// 发送 POST 请求axios({  method: 'post',  url: '/user/12345',  data: {    firstName: 'Fred',    lastName: 'Flintstone'  }});

繁写没有问题，怎样配置官方文档很清楚；
但是简写的配置反倒不是很全面；

简写配置(携带请求头和参数)：

总结：get请求的话就仿照繁写的请求进行一个参数配置。但是如果是post请求的话，就都是对象，然后在对象里进行一个键值对书写

const id = 'xxx';const token = 'xxxxxxxxxxxxxxxxx';axios.get("http://xxx/xxx",{//get请求传入参数的时候，里面传入 params 这个参数，一定要是params。//参数列表       params:{        id :12345       },     //请求头配置         headers:{          token: token        }    }).then((res)=>{        console.log(res)       })    .catch((error)=>{    console.log(error);    }) let refreshToken = localStorage.getItem("token");  axios    .post(      "http://202.101.162.69:8089/proxy/top/api/score/event/addAgentLog",      //参数列表      {        eventId: components.itemiframe.data.data.eventId,        eventAgent: components.eventAgent,        type: 2,        content: components.richtext.press,      },      //请求头配置      {        headers: {          Authorization: refreshToken,        },      }    )    .then((res) => {      // console.log("fankui",res)      if (res.data.code == 200) {        this.$message({          message: "批示成功",          type: "success",          center: "true",          duration: 500,          customClass: "press",        });      } else {        this.$message({          message: "批示失败",          type: "warning",          center: "true",          duration: 500,          customClass: "press",        });      }      this.richtext.pishi = "";      this.itemiframepishi.show = false;    });//post请求中要在params中携带参数 const { data: res } = await this.$http.post(        "/data/tableData/updateData",        {          tableDataMap: this.valueObj,          tableName: this.table_info.name,        },        { params: { userId: this.userId } }      );      if (res.code !== "200") return this.$message.error("编辑数据失败");

2、axios发送请求的方式获取到的数据进行处理

== 以上例子中用到的 .then .catch==

//无论是简写还是繁写，后面都可以这样直接用then和catch进行回调axios.get('/user?ID=12345') .then(function (response) {   console.log(response); }) .catch(function (error) {   console.log(error); });

async 和await

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

    • 任何一个async函数都会隐式返回一个promise
  • await关键字只能在使用async定义的函数中使用 
    • await后面可以直接跟一个 Promise实例对象
    •  await函数不能单独使用
  • async/await 让异步代码看起来、表现起来更像同步代码
    async getTableHeader() {      const { data: res } = await this.$http.get("/data/table/listCloumn", {        params: {          userId: this.userId,          tableName: this.table_info.name,        },      })

try,catch

   async loadChannels () {      try {        // const { data } = await getUserChannels()        // this.channels = data.data.channels        let channels = []        if (this.user) {          // 已登录，请求获取用户频道列表          const { data } = await getUserChannels()          channels = data.data.channels        } else {          // 未登录，判断是否有本地的频道列表数据          const localChannels = getItem('TOUTIAO_CHANNELS')          //    有，拿来使用          if (localChannels) {            channels = localChannels          } else {            //    没有，请求获取默认频道列表            const { data } = await getUserChannels()            channels = data.data.channels          }        }        this.channels = channels      } catch (err) {        this.$toast('获取频道数据失败')      }    },

来源：https://www.icode9.com/content-4-875901.html

赞 (0)

相关推荐