Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
为什么选择axios
在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http 请求支持 Promise API拦截请求和响应转换请求和响应数据
axiox请求方式
axios(config)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]])
ddd， 开始咯！
在src下新建一个 network 文件夹：（
网络模块 放网络请求）在network文件夹里面创建三个文件
config.js 请求方法的管理 core.js 参数的封装 index.js 入口文件
config.js：
export const GET
="get";
export const POST
="post";
export const path
={
list:
'要拼接的url路径'
};
core.js：
import axios from
'axios';
import {GET, POST, path
} from
'./config';
import {Loading, Message
} from
"element-ui";
//创建一个axios实例 返回一个axios对象
const instance
= axios.create
({
baseURL:
'https://api.ys.cc', //发送请求时会在url前面拼接 baseURL
// timeout: 5000,
//设置axios为form-data
headers:
{'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest:
[function
(data
) {
let ret
= '';
for (let it
in data
) {
ret +
= encodeURIComponent
(it
) +
'=' + encodeURIComponent
(data
[it
]) +
'&'
}
return ret
}]
});
// 创建loading实例
var loading
= null
;
// 添加请求拦截器
instance.interceptors.request.use
(function
(config
) {
loading
= Loading.service
({
lock: true,
text:
'Loading',
spinner:
'el-icon-loading',
background:
'rgba(0, 0, 0, 0.5)'
});
// config.headers
= {DeviceType:
'H5'};
return config
;
},
function (error
) {
// 对请求错误做些什么
Message
(error
);
console.log
("========>", error
);
return Promise.reject
(error
);
});
// 添加响应拦截器
instance.interceptors.response.use
(function
(response
) {
// 对响应数据做点什么
setTimeout
(() => {
loading.close
();
}, 2000
);
return response
;
},
function (error
) {
// 对响应错误做点什么
Message
(error
);
console.log
("========>", error
);
return Promise.reject
(error
);
});
//抛出 request 方法 接收三个参数 1.请求方式 2.请求路径 3.传递的参数
export function request
(methods, url, params
) {
switch
(methods
) {
case GET:
return get
(url, params
); //把promise对象 返回
case POST:
return post
(url, params
)
}
}
//get请求
function get
(url, params
) {
//axios请求 返回的是promise对象 有返回值 后续可以直接调用then catch 等方法
return instance.get
(url, params
)
}
//post请求
function post
(url, params
) {
return instance.post
(url, params
)
}
index.js：
import {GET, POST, path
} from
'./config';
import {request
} from
'./core'; //引入core模块中抛出的request方法
const network
= {
getList
(params
) {
return request
(GET, path.list, params
)
}
};
//抛出network
export default network
;
在main.js里 全局配置 network
import network from
'./network/index'
Vue.prototype.
$network=network
;
在Home.vue中使用
mounted
() {
//network里有 getList 方法 并需要接收参数
this.
$network.getList
().then
(res
=> {
console.log
(res
);
}).catch
(error
=> {
console.log
(error
);
})
}
