AXIOS 常用请求方式总结

Axios

中文文档
http://axios-js.com/
https://www.runoob.com/vue2/vuejs-ajax-axios.ht=ml

配置全局请求 URL

// 配置全局请求 URL
axios.defaults.baseURL="http://localhost:8080";

GET

用于获取资源

仅发送请求体头

axios.get("/student", {
    params: {
        name: "Lucy",
        age: 10,
        state: false,
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

// 简写方式
axios.get("/student?name=Lucy&age=10&state=false")
    .then(res => {
        console.log(res)
    }).catch(err => {
        console.error(err);
    })

@GetMapping("/student")
public void test(String name,Integer age,Boolean state) {
    System.err.println("name="+name+" age="+age+" state="+state);
}

POST

用于发送资源

仅发送请求体 JSON

// 常用方式
axios.post("/student", {
    name: "Lucy",
    age: 10,
    state: false,
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

//其它写法
axios({
    method: 'post',
    url: '/student',
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

@RequestMapping("/student")
public void test(@RequestBody Student student) {
    System.err.println(student);
}

同时传递请求头与请求体

axios({
    method: 'post',
    url: '/student',
    params: {
        message: "请求头"
    },
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

@RequestMapping("/student")
public void test(String message,@RequestBody Student student) {
    System.err.println(message);
    System.err.println(student);
}

DELETE

用于删除资源

仅发送请求体 JSON

axios.delete('/student', {
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then((response) => {
    console.log(error);
}).catch(function (error) {
    console.log(error);
});

@PutMapping("/student")
public void test(@RequestBody Student student) {
    System.err.println(student);
}

同时发送请求头与请求体

axios.delete('/student', {
    params: {
        message: "message~~"
    },
    data: {
        name: "Lucy",
        age: 10,
        state: false,
    }
}).then((response) => {
    console.log(error);
}).catch(function (error) {
    console.log(error);
});

@DeleteMapping("/student")
public void test(String message,@RequestBody Student student) {
    System.err.println(message);
    System.err.println(student);
}

PUT

用于完成的更新资源

仅发送请求体 JSON

axios.put('/student', {
    name: "Lucy",
    age: 10,
    state: false,
}).then((response) => {
    console.log(error);
}).catch(function (error) {
    console.log(error);
});

@PutMapping("/student")
public void test(@RequestBody Student student) {
    System.err.println(student);
}

同时发送请求头与请求体

axios({
    method: 'put',
    url: '/student',
    params: {
        message: "message~~~"
    },
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

@PutMapping("/student")
public void test(String message,@RequestBody Student student) {
    System.err.println(message);
    System.err.println(student);
}

PATCH

用于更新局部资源

仅发送请求体 JSON

axios.patch('/student', {
    name: "Lucy",
    age: 10,
    state: false
}).then((response) => {
    console.log(error);
}).catch(function (error) {
    console.log(error);
});

@PatchMapping("/student")
public void test(@RequestBody Student student) {
    System.err.println(student);
}

同时发送请求头与请求体

axios({
    method: 'patch',
    url: '/student',
    params: {
        message: "message~~~"
    },
    data: {
        name: "Lucy",
        age: 10,
        state: false
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

@PatchMapping("/student")
public void test(String message,@RequestBody Student student) {
    System.err.println(message);
    System.err.println(student);
}

AXIOS 的响应结构

{
  // `data` 由服务器提供的响应
  data: {},
  // `status`  HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",
  // `headers` 服务器响应的头
  headers: {},
  // `config` 是为请求提供的配置信息
  config: {}
}

通用请求方式

axios({
    //method 默认为 GET  [参数支持 GET POST DELETE HEAD OPTIONS PUT PATCH}
    method: 'get',
    url: '/user',
    // 请求 API 的父路径
    baseURL: 'https://some-domain.com/api/',
    params: {
        ID: 12345
    },
    // data 作为请求主体被发送的 JSON 数据 只适用于这些请求方法 'PUT', 'POST', 'PATCH'
    data: {
        firstName: 'Fred'
    },
    // timeout 指定请求超时的毫秒数(0 表示无超时时间)
    timeout: 1000
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err);
})

并发执行请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

支持请求方法的别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])