axios实现RESTful请求规范

• 一般格式

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"