万物皆可抛,唯有学习高
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
axios是ajax ajax不止axios。
使用 npm:
$ 1. npm install axios
$ 2. 在main.js 挂载到vue原型上起的名字叫$axios,程序员的默认吧 随你起也行
import axios from "axios";
Vue.prototype.$axios = axios;
使用 cdn:外链方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 为给定 ID 的 user 创建请求
get 方法
拼接参数字符串
axios.get('/user?ID=12345').then(res {
console.log(res);
}).catch(err) {
console.log(err);
});
// 多个请求可以这样做
2. 用params对象形式传多个
axios.get('/user', {
params: {
ID: 12345
}
}).then(res {
console.log(res);
}).catch(err) {
console.log(err);
});
post 请求
3.post 类似 ajax 去掉里面的params:{} ,直接在{}对象里写
axios.post('/user', {
firstName: 'feng',
lastName: 'lang'
}). then(res {
console.log(res);
}).catch(err) {
console.log(err);
});
//创建实例可以使用自定义配置新建一个 axios 实例
axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
//某个请求的响应包含以下信息
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}
//使用 then 时,你将接收下面这样的响应:
axios.get('/user/12345').then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});
//拦截器在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// cnpm i axios
//在main.js 挂载到vue原型上起的名字叫$axios,程序员的默认吧 随你起也行
//import axios from "axios";
//Vue.prototype.$axios = axios;
// 勇于 尝试 新的事物 !!
// .Vue 生命周期11个 钩子函数 常用8个
beforeCreate -- 创建前
created ---- 创建后
beforeMount -- 实例 挂载到DOM 前
mounted --- 挂载到DOM 之后
beforeUpdate --- 虚拟DOM更新前
updated --- 虚拟 DOM更新后
beforeDestory --- 实例销毁前
destoyed -- 销毁后
//补充 个小知识 技巧
//前++ 和 后++的区别
1 . 先看到是运算符还是值
2 . 如果是运算符就先运算在赋值
3 . 如果先看到的是值那么就先赋值在运算
//splice(会修改原数组,可以对指定的数组进行增删) slice(0,3)// 0 1 2 不会修改原数组