axios实现RESTful请求规范

  1. 云栖社区>
  2. 博客>
  3. 正文

axios实现RESTful请求规范

eyunshu 2019-08-18 18:36:22 浏览246
展开阅读全文
  • 一般格式

axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
get和delete的格式类似,post、put、patch格式类似

  • GET:获取数据
    后端将参数当做url 参数 接收
this.axios.get('/url/user', {
    params: {
        "name": "kevin",
        "password": "123456"
    }
})
 .then((response)=> {
    console.log(response)
})
.catch((error)=> {
    console.log(error);
});

后端用query接收参数,URL格式:"/url/user?name=kevin&password=123456"

  • POST:新增数据
    使用post方法时header['content-type']默认为application/json
this.axios.post('/url/add', {
          "username": this.userinfo.username,
          "password": this.userinfo.password
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });

后端接收用JSON接收参数,URL不会体现变化

如果修改为application/x-www-form-urlencoded,那么需要引入qs.stringify序列化

this.axios.post('url/add', this.qs.stringify({
          "username": this.userinfo.username,
          "password": this.userinfo.password
        }), {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });

后端使用FORM接收参数

  • PUT:更新数据
    PUT和POST类似
this.axios.put('/url/update', {
    "userId": this.userinfo.Id,
    "userName": this.userinfo.username
})
.then((response)=> {
    console.log(response)    
})
.catch((error)=> {
    console.log(error);
});

后端接收方式也类似

  • DELETE:删除数据
    使用delete方法时,由于数据包中没有默认的header['content-type']=application/json,此时数据向后端传输时,需要做一层data封装.
this.axios.delete('/url/delete', { 
    data: { username : "admin" , password : "123" } 
})
.then((response)=> {
    console.log(response)                   
})
.catch((error)=> {
    console.log(error);
});

后端接收用JSON接收参数
或者后端将参数当做url 参数 接收

this.axios.delete('/url/delete', { 
    params: { username : "admin" , password : "123" } 
})
.then((response)=> {
    console.log(response)                   
})
.catch((error)=> {
    console.log(error);
});

后端用query接收参数, URL格式:"/url/delete?name=admin&password=123"
或者后端将参数当做url 参数 接收

this.axios.delete('/url/delete/' + id)
.then((response)=> {
    console.log(response)                   
})
.catch((error)=> {
    console.log(error);
});

后端用param接收参数, URL格式:"/url/delete/id"

网友评论

登录后评论
0/500
评论
eyunshu
+ 关注