axios.get(‘/user’, {
params: {
ID: 12345
}
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
实行post哀求
axios.post(‘/user’, {
firstname: ‘Fred’,
lastName: ‘Flintstone’
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
实行多个并发哀求
function getUserAccount () {
return axios.get(‘/user/12345’);
}
function getUserPermissions () {
return axios.get(‘/user/12345/permissions’);
}
axios.all([getUserAccount(), getUserPermission()])
.then(axios.spread(function (acct, perms) {
// 两个哀求都实行完成
}));
以上为根本利用，现在通过实例中实践一下
假如现在有某个接口（API），我们须要通过get哀求调用，然后将返回数据渲染在页面上
api：https://api.apiopen.top/getJoke
入参：page=1、count=2、type=video
根据上面的根本利用案例可知，可以利用两种方式，接下来逐一验证
1、URL地点参数拼接
由上面的api和入参可得拼接后的URL为：https://api.apiopen.top/getJoke?page=1&count=2&type=video（api后?将参数拼接，多个参数用&毗连）
我是A组件
革新页面，打开F12，切换到Network，发现此时页面发送了哀求
切换到Console，检察控制台打印信息
我们已经乐成获取接口的相应信息（返回值） ，数据布局为json格式，此时我们可以将想要的数据渲染到页面上，睁开检察json数据
如我们想要将赤色部分的信息渲染在页面上，此时可以对相应信息稍作处置惩罚
我是A组件
{{result}}
页面体现效果
2、传入params对象情势
别的一种get哀求的写法，利用params对象，将所传参数当成params对象的键值对传入。以下可到达雷同效果
this.$axios.get(‘https://api.apiopen.top/getJoke’,{
params:{ //将URL地点拼接参数的情势换成传入params对象的情势
page:1,
count:2,
type:‘video’
}
}).then(res=>{
//console.log(res,“相应信息”)
this.result = res.data.message //为data中的result赋值
})
这就是axios的根本利用，是不是很简朴？
明白了get哀求之后，post哀求也就不难明白，除了哀求方式（get酿成了post）与哀求参数的写法差别，其他写法根本划一。如下，假如此时为一个post哀求，可以这么写
this.$axios.post(‘https://api.apiopen.top/getJoke’,
{ //哀求体为一个对象
page:1,
count:2,
type:‘video’
}
).then(res=>{
//console.log(res,“相应信息”)
this.result = res.data.message //为data中的result赋值
})
除了如上两种方式外尚有其他的写法吗？那是固然，请继续往下看。
可以通过向axios转达相干设置来创建哀求：
如get哀求我们可以这么写
this.$axios({
method: ‘get’,
url: ‘https://api.apiopen.top/getJoke?page=1&count=2&type=video’,
}).then(res=>{
this.result = res.data.message
})
进而也可以这么写
this.$axios({
method: ‘get’,
url: ‘https://api.apiopen.top/getJoke’,
params:{
page:1,
count:2,
type:‘video’
}
}).then(res=>{
this.result = res.data.message
})
与之前写法差别的是，我们直接把哀求相干设置通过对象传入axios，如get哀求此时用method:"get"体现，直接传入的url也利用url:"xxx"体现等等，这些成为一个对象的属性，该对象即为设置对象，形如axios(config)。
转达设置对象post哀求案例
// 发送 POST 哀求
axios({
method: ‘post’,
url: ‘/user/12345’,
data: { //注意这里，get参数利用params，post参数利用data
firstName: ‘Fred’,
lastName: ‘Flintstone’
}
})
那么我们在通过这种方式利用axios时，可转达的设置（设置对象的属性）都有哪些呢？请往下阅读哀求设置。
哀求设置
这些是创建哀求时可以用的设置选项。只有 url 是必须的，假如没有指定 method，哀求将默认利用 get方法。
{
// url 是用于哀求的服务器 URL
url: ‘/user’
// method 是创建哀求时利用的方法
method: ‘get’, // default
// baseURL 将主动加在 url 前面，除非 url 是一个绝对 URL
// 它可以通过设置一个 baseURL 便于为 axios 实例的方法转达相对 URL
baseURL: ‘https://some-domain.com/api/’,
// transformRequest 允许在向服务器发送前，修改哀求数据
// 只能用在 PUT、POST 和 PATCH 这几个哀求方法
// 背面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data, headers) {
// 对 data 举行恣意转换处置惩罚
return data;
}],
// transformResponse 在转达给 then/catch 前，允许修改相应数据
transformResponse: [function (data) {
// 对 data 举行恣意转换处置惩罚
return data;
}],
// headers 是即将被发送的自界说哀求头
headers: {‘X-Requested-With’: ‘XMLHttpRequest’},
// params 是即将与哀求一起发送的 URL 参数
// 必须是一个无格式对象 (plain object) 或 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 和 PATCH
// 在没有设置 transformRequest 时，必须是以下范例之一：
// - string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams
// - 欣赏器专属：FormData，File，Blob
// - Node专属：Stream
data: {
firstName: ‘Fred’
},
// timeout 指定哀求超时的毫秒数(0 体现无超时时间)
// 假如哀求耗费了凌驾 timeout 的时间，哀求将被停止
timeout: 1000,
// withCredentials 体现跨域哀求时是否须要利用凭据
withCredentials: false, // default
// adapter 允许自界说处置惩罚哀求，以使测试更轻松
// 返回一个 promise 并应用一个有效的相应(查阅 response docs)
adapter: function (config) {
/* … */
},
// auth 体现应该利用 HTTP 根本验证，并提供根据
// 这将设置一个 Authorization 头，覆写掉现有的恣意利用 headers 设置的自界说 Authorization 头
auth: {
username: ‘janedoe’,
password: ‘s00pers3cret’
},
// responseType 体现服务器相应的数据范例，可以是 arraybuffer、blob、document、json、text、stream
responseType: ‘json’, // default
// responseEncoding 体现对相应的编码
// Note：对于 responseType 为 stream 或 客户端哀求会忽略
responseEncoding: ‘utf-8’,
// xsrfCookieName 是用作 xsrf token 值的 cookie 名称
xsrfCookieName: ‘XSRF-TOKEN’, // default
// xsrfHeaderName 是 xsrf token 值的 http 头名称
xsrfHeaderName: ‘X-XSRF-TOKEN’, // default
// onUploadProgress 允许为上传处置惩罚进度变乱
onUploadProgress: function (progressEvent) {
// … …
},
// onDownloadProgress 允许为下载处置惩罚进度变乱
onDownloadProgress: function (progressEvent) {
// … …
},
// maxContentLength 界说允许的相应内容的最大尺寸
maxContentLength: 2000,
// validateStatus 界说对于给定的 HTTP 相应状态码是 resolve 或 reject promise。
// 假如 validateStatus 返回 true (大概设置为 null 或 undefined)，promise 将被 resolve，否则 promise 将被 reject
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// maxRedirects 界说在 node.js 中 follow 的最大重定向数量
// 假如设置为 0，将不会 follow 任何重定向
maxRedirects: 5,
// socketPath 用于在 node.js 中界说 UNIX Socket
// e.g. ‘/var/run/docker.sock’ to send requests to the docker daemon.
// 只能指定 socketPath 或 proxy，假如两者同时指定，将利用 socketPath
socketPath: null,
// httpAgent 和 httpsAgent 分别在 node.js 中用于界说在实行 http 和 https 时利用的自界说署理。
// 允许像如许设置选项。keepAlive 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// proxy 界说署理服务器的主体名称和端口
// auth 体现 HTTP 根本验证应当用于毗连署理，并提供根据
// 这将会设置一个 Proxy-Authorization 头，覆写掉已有的通过利用 header 设置的自界说 Proxy-Authorization 头
proxy: {
host: ‘127.0.0.1’,
port: 9000,
auth: {
username: ‘mikeymike’,
password: ‘rapunz31’
}
},
// cancelToken 指定用于取消哀求的 cancel token
cancelToken: new CancelToken(function (cancel) {
// … …
})
}
正是由于选项设置的多样性，我们可以根据这个设置来个性化axios，大概说是封装axios（往下会睁开）。
设置默认值
我们可以指定将被用在各个哀求的设置默认值，说白了就是设置哀求的一些默认值，使得每次利用axios时都会传入雷同的设置。
全局的axios默认值
利用axios.defaults.xxx的方式，如
axios.defaults.baseURL = ‘http://api.example.com’;
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
如像刚刚我们的谁人哀求一样，假如整个项目的哀求地点域名或上下文根都一样，那么我们就可以利用设置默认baseURL，举个例子，如下图
整个项目哀求的url的前缀部分都是一样的，那么我们可以如许设置
//main.js
import axios from ‘axios’
axios.defaults.baseURL = ‘https://api.apiopen.top’
Vue.prototype.$axios = axios
此时哀求的url可以修改成如下所示
this.$axios({
method: ‘get’,
url: ‘/getJoke’, //此时会将baseURL与该url举行拼接成终极哀求的url
params:{
page:1,
count:2,
type:‘video’
}
}).then(res=>{
this.result = res.data.message
})
自界说实例默认值
我们可以通过axios.create方式创建一个实例，为该实例设置默认值（该种方式可用于封装自界说axios，往下会睁开）
// 创建实例时设置设置默认值
const instance = axios.create({
前端资料汇总
我不绝以为技能口试不是测验，考前背背题，发给你一张考卷，答完交卷等关照。
起首，技能口试是一个 认识本身 的过程，知道本身和表面天下的差距。
更紧张的是，技能口试是一个双向相识的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，由于他以后大概就是你的同事大概向导，以是，口试官问你有什么题目的时间，不要说没有了，要去试图相识他的工作内容、相识这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在本身的内心分别一个比例。
末了，祝愿各人在这并不友爱的情况下都能找到本身心仪的归宿。
参加社区》https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金 |
发表于 2026-1-12 01:51:46