vue-axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中
一、流程:
1. 拿到项目和后端接口,首先要配置全局代理;
2. 接着全局封装axios和request.js;
3. 过滤axios请求方式,控制路径,参数的格式,http.js;
4. 正式封装api.js;
5. 页面调用;
二、具体
(1)前期配置
- 终端:【npm i axios -s】
- main.js:【import axios from "axios"】
(2)
(3)
(4)
import axios from 'axios'
import qs from 'qs' //qs模块可以将对象转换为查询字符串
const instance = axios.create()
const myaxios = {
// 用于发送get请求
/**
* 基于Axios发送get请求,返回Pormise对象
* @param {String} url 请求资源路径
* @param {Object} params 请求参数
*/
get(url, params) {
return instance({
url,
params,
method: 'GET'
})
},
// 用于发送post请求
/**
* 基于Axios发送post请求
* @param {String} url 请求资源路径
* @param {Object} params 请求参数 {page:1,pagesize:20}==>page=1&pagesize=20
*/
post(url, params) {
return instance(
{
url,
data: qs.stringify(params),
method: 'POST'
}
)
}
}
export default myaxios
文件名.vue
import axios from 'axios'
import myaxios from '../http/MyAxios'
export default {
data() {
return {
movies: [],//用于保存需要显示的电影列表
keyword: '',//与关键字输入框完成双向数据绑定
}
},
methods: {
getMovies() {
let instance = axios.create()//创建axios实例
instance({
url: 'https://web.codeboy.com/bmdapi/movie-infos',
params: { page: 1, pagesize: 20 },
methos: "GET"
})
.then(res => {
console.log(res);
//将服务端返回的电影列表,保存进data.movies中
this.movies = res.data.data.result
})
.catch(res => {
console.warn(err);
})
},
//使用Myaxios发送post,请求模糊查询电影列表
getMoviesLike() {
//没有关键字直接返回
if (!this.keyword) {
return
}
let instance = axios.create()
instance({
url: 'https://web.codeboy.com/bmdapi/movie-infos/name',
method: 'POST',
data: 'page=1&pagesize=20&name=' + this.keyword
})
.then(res => {
console.log("模糊查询的结果", res);
this.movies = res.data.data.result
})
}
}
}
三、原生方式
methods:{
getMthods(){
axios.get("https://api.cat-shop.penkuoer.com/api/v1/products",{
params:{
page:3,
per:2
},
headers:{
}
})
.then(res => {
console.log('res',res);
})
},
postMthods(){
axios.post("https://api.cat-shop.penkuoer.com/api/v1/auth/login",{
name:"lxy",
age:18
},{
params:{
a:123,
b:123
}
})
.then(res => {
console.log('res',res);
})
},
}