Axios 简单基础应用
Axios 是一个基于 Promise 的 HTTP 客户端,可以用于发起 HTTP 请求并处理响应结果。它运行在浏览器和 Node.js 环境中,具有简洁、灵活、易用等特点,因此广泛应用于前端开发中。
Axios 支持以下特性:
在浏览器中发送 XMLHttpRequests 请求。
在 Node.js 中发送 HTTP/HTTPS 请求。
支持 Promise API。
支持拦截请求和响应。
能够转换请求和响应数据。
提供了取消请求的方案。
自动转换 JSON 数据。
安装axios
Axios 库的安装和使用步骤如下:
使用 npm 安装 Axios 库,可以在终端或命令行中输入以下命令:
npm install axios
在需要使用 Axios 的文件中,引入 Axios 库:
// ES6 模块语法 import axios from 'axios';
直接通过script全局引用
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios简单示例
发送get请求
<template>
<el-row class="mb-4">
<el-button type="primary" @click="axiostest">Primary</el-button>
</el-row>
</template>
<script>
import axios from 'axios';
export default {
methods: {
axiostest() {
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
console.log(response.data); // 处理响应结果
})
.catch(error => {
console.error(error); // 处理异常情况
});
}
}
}
</script>
这段代码是一个 Vue 单文件组件,包含了一个按钮和一个发送 Axios 请求的方法
axiostest
。当用户点击按钮时,会调用该方法发送 GET 请求,请求一个假的待办事项数据,并将响应结果打印到控制台中。
如果要将请求参数放到查询参数(query params)中,可以将参数以键值对的形式附加到 URL 的末尾,例如:/api/endpoint?param1=value1¶m2=value2
。使用Axios发送带有查询参数的GET请求的代码示例如下:
import axios from 'axios';
const params = {
param1: 'value1',
param2: 'value2'
};
axios.get('/api/endpoint', { params })
.then(function (response) {
console.log(response.data); // 处理返回的数据
})
.catch(function (error) {
console.log(error); // 处理错误
});
在上面的示例中,我们定义了一个 params
对象,其中包含我们想要添加到查询参数中的键值对。然后,在调用 axios.get()
方法时,将 params
对象传递给第二个参数。Axios会自动将 params
对象转换为查询参数,并将其附加到请求的URL中。这样,最终发送的请求将是带有查询参数的GET请求。
注意:对于复杂的参数对象,Axios会自动处理嵌套对象和数组,并正确编码查询参数。
发送post请求
application/json
Axios默认的post请求格式就是 application/json
,可以直接发送:
<template>
<el-row class="mb-4">
<el-button type="primary" @click="axiostest">Primary</el-button>
</el-row>
</template>
<script>
import axios from 'axios';
export default {
methods: {
axiostest() {
const post_data = {
name: "xiaoming",
age: 18
};
axios.post('http://httpbin.org/post', post_data, {
headers: { 'Content-Type': 'application/json' }
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
}
}
}
</script>
application/x-www-form-urlencoded
Axios 发送application/x-www-form-urlencoded 格式的请求体需要将JSON数据{"name: "xiaoming", "age": "18"} 序列化为查询字符格式 name=xiaoming&age=18,Axios会自动识别请求体的格式并在请求头中声明。
<template>
<el-row class="mb-4">
<el-button type="primary" @click="axiostest">Primary</el-button>
</el-row>
</template>
<script>
import axios from 'axios';
import qs from 'qs';
export default {
methods: {
axiostest() {
const post_data = {
name: "xiaoming",
age: 18
};
axios.post('http://httpbin.org/post', qs.stringify(post_data), {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
}
}
}
</script>
以上代码中,我们首先使用 import
语句导入了 Axios 库和 qs
库。接着,定义了一个名为 post_data
的 JavaScript 对象,它包含了名为 name
和 age
的两个属性。
然后,使用 qs.stringify()
方法将 post_data
对象序列化为 URL 查询字符串的形式,并传递给 Axios 的 data
参数作为请求体。同时,在请求头中使用 headers
参数指定了 Content-Type 为 application/x-www-form-urlencoded。
最后,使用 then()
方法和 catch()
方法分别处理响应结果和异常情况,并将响应结果输出到控制台。
需要注意的是,在发送 POST 请求时,如果请求体是 application/x-www-form-urlencoded 格式的数据,需要使用 qs
库对其进行序列化处理。在设置请求头时,需要使用 headers
参数,并将 Content-Type 设置为 application/x-www-form-urlencoded。
multipart/form-data
Axios 发送multipart/form-data
格式的请求体需要将数据变成 FormData
对象格式,Axios 会自动识别请求体的格式并在请求头中声明。
<template>
<el-row class="mb-4">
<el-button type="primary" @click="axiostest">Primary</el-button>
</el-row>
</template>
<script>
import axios from 'axios';
export default {
methods: {
axiostest() {
const formData = new FormData();
formData.append('name', 'xiaoming');
formData.append('age', 18);
axios.post('http://httpbin.org/post', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
}
}
}
</script>
在上述代码中,我们首先使用 FormData()
构造函数创建一个新的 FormData 对象,并使用 append()
方法向其中添加两个字段,分别是名为 name
和 age
的字段。
然后,我们使用 axios.post()
方法发送 POST 请求,并将 FormData 对象作为请求体传递给 data
参数。同时,在请求头中使用 headers
参数指定了 Content-Type 为 multipart/form-data。
最后,使用 then()
方法和 catch()
方法分别处理响应结果和异常情况,并将响应结果输出到控制台。
需要注意的是,在发送 POST 请求时,如果请求体是 multipart/form-data 类型的数据,需要使用 FormData()
构造函数来创建 FormData 对象,并将其传递给 Axios 的 data
参数作为请求体。在设置请求头时,需要使用 headers
参数,并将 Content-Type 设置为 multipart/form-data。
请求头中的声明是可以省略的,如果您不指定请求头中的 Content-Type 或者使用
axios.defaults.headers
设置了默认的请求头,那么 Axios 会自动根据请求数据来设置相应的 Content-Type。
利用FormData对象上传文件
<template>
<div>
<input type="file" ref="fileInput" @change="uploadFile">
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
uploadFile() {
const formData = new FormData();
formData.append('file', this.$refs.fileInput.files[0]);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
}
}
}
</script>
在该示例中,当用户选择文件时,会触发uploadFile方法,在该方法中创建FormData对象,并将选定的文件通过append()方法添加到FormData对象中。然后,通过axios发送POST请求,将FormData对象作为data参数传递给axios。
向FormData对象中添加要上传的文件,通过append()方法将文件添加到FormData对象中。此处需要传入两个参数:第一个参数为key,即表单数据的名称;第二个参数为value,即要上传的文件。
axios的参数解析
axios是一个基于Promise的HTTP客户端,可用于在浏览器和Node.js中与后端进行数据交互。它可以通过两种方式来发送请求:
axios(config)
第一种方式是直接传递一个配置对象给axios函数,该对象包含了请求的各种参数,例如:
axios({
url: 'https://api.example.com/data',
method: 'get',
params: {
limit: 10,
offset: 0
},
headers: {
'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
上述代码中,我们通过传递一个配置对象给axios函数来发起一个GET请求,该请求会携带一个查询参数limit=10&offset=0,并附带一个Authorization头部信息。当请求得到响应时,我们可以在.then()方法中处理响应数据,当请求出现错误时,则会在.catch()方法中执行错误处理。
axios(url[, config])
第二种方式是仅传递一个url和一个可选的配置对象给axios函数,例如:
axios('https://api.example.com/data', {
method: 'post',
data: {
name: 'John Doe',
age: 30
},
headers: {
'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.log(error);
});
上述代码中,我们通过传递一个URL和一个配置对象给axios函数来发起一个POST请求,该请求会携带一个请求体数据{name: 'John Doe', age: 30}和一个Authorization头部信息。当请求得到响应时,我们可以在.then()方法中处理响应数据,当请求出现错误时,则会在.catch()方法中执行错误处理。
无论是哪种方式,axios都会返回一个Promise对象,因此我们可以使用Promise的链式调用来处理异步请求和响应,使代码更加简洁和易于维护。
为了方便起见,axios 为所有支持的请求方法提供了别名。
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
示例
// 下面3种写法是一样的
axios({
method: 'get',
url: 'http://httpbin.org/get',
params: {name: "CloudSir"}
});
axios.request('http://httpbin.org/get', {
method: 'get',
params: {name: "CloudSir"}
});
axios.get('http://httpbin.org/get', {
params: {name: "CloudSir"}
});
request config 参数
{
// `url` 是用于请求的服务器 URL
url: '/get',
// `method` 是创建请求时使用的方法
method: 'get', // 默认值
// `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
// 真实请求的 URL 地址是 baseURL+url,可以不设置baseURL,将完整地址放在url钟
baseURL: 'http://httpbin.org',
// `transformRequest` 允许在向服务器发送前,修改请求数据
// 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 数组中最后一个函数必须返回一个字符串, 一个Buffer实例,ArrayBuffer,FormData,或 Stream
// 你可以修改请求头。
transformRequest: [function (data, headers) {
// 对发送的 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前,允许修改响应数据
transformResponse: [function (data) {
// 对接收的 data 进行任意转换处理
return data;
}],
// 自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是与请求一起发送的 URL 参数
// 必须是一个简单对象或 URLSearchParams 对象
params: {
ID: 12345
},
// `paramsSerializer`是可选方法,主要用于序列化`params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作为请求体被发送的数据
// 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
// 在没有设置 `transformRequest` 时,则必须是以下类型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属: FormData, File, Blob
// - Node 专属: Stream, Buffer
data: {
firstName: 'Fred'
},
// 发送请求体数据的可选语法
// 请求方式 post
// 只有 value 会被发送,key 则不会
data: 'Country=Brasil&City=Belo Horizonte',
// `timeout` 指定请求超时的毫秒数。
// 如果请求时间超过 `timeout` 的值,则请求会被中断
timeout: 1000, // 默认值是 `0` (永不超时)
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // default
// `adapter` 允许自定义处理请求,这使测试更加容易。
// 返回一个 promise 并提供一个有效的响应 (参见 lib/adapters/README.md)。
adapter: function (config) {
/* ... */
},
// `auth` HTTP Basic 验证
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示浏览器将要响应的数据类型
// 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
// 浏览器专属:'blob'
responseType: 'json', // 默认值
// `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
// 注意:忽略 `responseType` 的值为 'stream',或者是客户端请求
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // 默认值
// `xsrfCookieName` 是 xsrf token 的值,被用作 cookie 的名称
xsrfCookieName: 'XSRF-TOKEN', // 默认值
// `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值
// `onUploadProgress` 允许为上传处理进度事件
// 浏览器专属
onUploadProgress: function (progressEvent) {
// 处理原生进度事件
},
// `onDownloadProgress` 允许为下载处理进度事件
// 浏览器专属
onDownloadProgress: function (progressEvent) {
// 处理原生进度事件
},
// `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
maxContentLength: 2000,
// `maxBodyLength`(仅Node)定义允许的http请求内容的最大字节数
maxBodyLength: 2000,
// `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
// 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),
// 则promise 将会 resolved,否则是 rejected。
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认值
},
// `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
// 如果设置为0,则不会进行重定向
maxRedirects: 5, // 默认值
// `socketPath` 定义了在node.js中使用的UNIX套接字。
// e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
// 只能指定 `socketPath` 或 `proxy` 。
// 若都指定,这使用 `socketPath` 。
socketPath: null, // default
// `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
// and https requests, respectively, in node.js. This allows options to be added like
// `keepAlive` that are not enabled by default.
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// `proxy` 定义了代理服务器的主机名,端口和协议。
// 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
// 使用 `false` 可以禁用代理功能,同时环境变量也会被忽略。
// `auth`表示应使用HTTP Basic auth连接到代理,并且提供凭据。
// 这将设置一个 `Proxy-Authorization` 请求头,它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
// 如果代理服务器使用 HTTPS,则必须设置 protocol 为`https`
proxy: {
protocol: 'https',
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// see https://axios-http.com/zh/docs/cancellation
cancelToken: new CancelToken(function (cancel) {
}),
// `decompress` indicates whether or not the response body should be decompressed
// automatically. If set to `true` will also remove the 'content-encoding' header
// from the responses objects of all decompressed responses
// - Node only (XHR cannot turn off decompression)
decompress: true // 默认值
}
response 参数
axios.get('http://httpbin.org/get').then(function (res) {
console.log(res.data);
});
使用了传统的.then()方法,来处理该Promise对象。这个.then()方法接收一个回调函数,当请求成功时,该回调函数将接收一个res参数,该参数包含了响应数据的全部信息,包括res.status, res.statusText, res.headers等字段。因此,在.then()回调函数内,我们可以通过访问res.data来获取响应主体中的数据
或者ES6的箭头函数和简化的Promise语法。
axios.get('http://httpbin.org/get').then(response => {
console.log(response.data);
});
使用了ES6的箭头函数和简化的Promise语法,来处理该Promise对象。由于这种写法比较简洁,因此是目前最常用的写法之一。这个箭头函数接收一个response参数,该参数包含了响应数据的全部信息,包括response.status, response.statusText, response.headers等字段。因此,在箭头函数内,我们可以通过访问response.data来获取响应主体中的数据
res的结构
// res的结构
{
// `data` 是服务器后端返回的信息
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 是服务器响应头
// 所有的 header 名称都是小写,而且可以使用方括号语法访问
// 例如: `response.headers['content-type']`
headers: {},
// `config` 是 `axios` 请求的配置信息
config: {},
// `request` 是生成此响应的请求
// 在node.js中它是最后一个ClientRequest实例 (in redirects),
// 在浏览器中则是 XMLHttpRequest 实例
request: {}
}
error 参数
axios.get('http://httpbin.org/get')
.catch(function (error) {
if (error.response) {
// 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已经成功发起,但没有收到响应
// `error.request` 在浏览器中是 XMLHttpRequest 的实例,
// 而在node.js中是 http.ClientRequest 的实例
console.log(error.request);
} else {
// 发送请求时出了点问题
console.log('Error', error.message);
}
console.log(error.config);
});
或者
axios.get('http://httpbin.org/get')
.catch(error => {
if (error.response) {
// 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已经成功发起,但没有收到响应
// `error.request` 在浏览器中是 XMLHttpRequest 的实例,
// 而在node.js中是 http.ClientRequest 的实例
console.log(error.request);
} else {
// 发送请求时出了点问题
console.log(`Error ${error.message}`);
}
console.log(error.config);
});
使用
error.toJSON
可以获取更多关于HTTP错误的信息。
Axios对象
编写大型项目时,会使用多个axios,每个都需要配置统一的 base_url、header 等,我们可以利用 axios.create 创建一个公共的 Axios对象 :
const my_request = axios.create({
baseURL: 'http://httpbin.org',
headers: {
'X-Custom-Header': 'foobar',
Authorization: 'Bearer token123'}
});
当需要使用 Axios 发生请求时:
my_request.get(url: "/get")
.then(res => {
console.log(res.data);
});
Axios 的默认配置
可以使用 axios.defaults
对象来设置全局的默认配置。以下是一个示例:
import axios from 'axios';
// 设置默认的 base URL
axios.defaults.baseURL = 'http://api.example.com';
// 设置默认的请求头
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.headers.post['Content-Type'] = 'application/json';
export default {
methods: {
axiostest(data) {
// 发送请求的代码
}
}
}
在上述示例中,我们使用 axios.defaults.baseURL
设置了默认的 base URL,这意味着在发送请求时不需要再提供完整的 URL,只需要提供相对路径即可。同时,我们使用 axios.defaults.headers
设置了默认的请求头,这样在每个请求中都会自动带上这些请求头。
你可以根据需求设置其他的默认配置,例如超时时间、拦截器等。设置默认配置后,在发送请求时可以省略一些通用的配置,使代码更简洁而且易于维护。
拦截器
Axios 中的拦截器(Interceptor)是用于在发送请求或响应到达之前,对它们进行拦截和处理的中间件。我们可以通过拦截器来全局地添加请求头、对请求参数进行加密、检查登录状态等操作,或对响应数据进行解析、格式化等处理。
拦截器分为请求拦截器和响应拦截器:
请求拦截器:在发送请求之前对请求进行拦截处理,例如添加请求头、转换请求参数等操作;
响应拦截器:在接收到响应数据之后对响应进行拦截处理,例如解析返回数据、格式化数据等操作。
Axios 允许我们通过以下方式来添加拦截器:
// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
response => {
// 对响应数据做些什么
return response;
},
error => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
在上述代码中,我们使用axios.interceptors.request.use()方法来添加一个请求拦截器,使用axios.interceptors.response.use()方法来添加一个响应拦截器。
对于请求拦截器,我们可以在该函数内部做一些操作,例如添加全局的请求头,对请求参数进行加密等。需要注意的是,如果想让请求继续执行,必须 return config 对象,否则请求会被阻止。如果想要中止这个请求,可以返回一个 Error 对象或者一个 Promise 对象,后者的 catch 方法会被调用。
对于响应拦截器,我们可以在该函数内部解析和处理服务器返回的数据,例如对返回数据进行格式化、判断登录状态等。同样需要注意的是,如果想让响应继续执行,必须 return response 对象,否则响应会被阻止。如果想要中止这个响应或返回一个错误信息,可以返回一个 Error 对象或者一个 Promise 对象,后者的 catch 方法也会被调用。
需要注意的是,拦截器可以被多次调用,因此可以添加多个请求拦截器和响应拦截器,它们会依次执行并传递数据。其中,请求拦截器的后添加者先执行,响应拦截器的先添加者先执行。
拦截器示例【获取本地的token值,添加到请求数据中并处理响应异常】
import axios from 'axios';
// 创建一个axios实例
const instance = axios.create({
baseURL: 'http://api.example.com',
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 从本地获取token(例如从localStorage或者cookie中获取)
const token = localStorage.getItem('token');
// 如果token存在,则将其添加到请求头部或请求参数中
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
// 或者:config.params['token'] = token;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
// 处理成功的响应
const code = response.status;
if ((code >= 200 && code < 300) || code === 304) {
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
},
error => {
// 处理错误的响应
console.log(error);
if (error.response) {
switch (error.response.status) {
case 401:
// 返回401 清除token信息并跳转到登陆页面
store.commit('DEL_TOKEN');
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
case 404:
Message.error('网络请求不存在');
break;
default:
Message.error(error.response.data.message);
}
} else {
// 请求超时或者网络有问题
if (error.message.includes('timeout')) {
Message.error('请求超时!请检查网络是否正常');
} else {
Message.error('请求失败,请检查网络是否已连接');
}
}
return Promise.reject(error);
}
);
// 发送请求
instance.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
首先创建了一个名为
instance
的axios实例,并设置了基础URL。然后我们使用interceptors.request
方法来定义请求拦截器。在请求拦截器中,我们从本地获取token值,并将其添加到请求头部或请求参数中。在发送请求之前,我们可以通过调用
instance.get
、instance.post
等方法来发送请求。这些请求会经过请求拦截器,token会被添加到请求数据中。最后,我们可以通过.then
处理响应成功的回调函数,或通过.catch
处理错误的回调函数。之后添加了响应拦截器。在响应拦截器中,我们首先处理成功的响应,如果响应状态码在200到299之间或者为304,我们将通过
Promise.resolve
返回响应数据。否则,我们将通过Promise.reject
返回整个响应对象。对于错误的响应,我们首先检查
error.response
是否存在,如果存在,则根据不同的状态码执行相应的操作。例如,在状态码为401时,我们清除token信息并重定向到登录页面;在状态码为404时,我们显示一个错误提示。对于其他状态码,我们可以根据实际需要进行相应的处理。最后,我们仍然可以通过
.then
和.catch
来处理成功和错误的回调函数。
async await的使用
如果你不喜欢通过then和catch这个回调的方式来获取数据,也只可以通过async 和await的方式来处理异步部分。
async function login() {
try {
const userInfo = {
username: 'musen123',
password: '1234567'
};
const response = await axios.post('http://api.keyou.site:8000/user/login/', userInfo);
console.log(response);
} catch (error) {
console.error(error);
}
}
在上面的示例中,我们将异步操作包裹在一个async函数中,在函数内部使用await关键字来等待axios请求的结果。如果请求成功,返回的结果会被赋值给response变量;如果请求失败,会抛出一个错误,我们可以使用try-catch语句来捕捉并处理错误。最后,我们可以使用console.log打印响应结果,使用console.error打印错误信息。
评论