1.首先感謝同事 2.之前一直在做angularjs的項目,目前vue火熱,所以自己搭建了一個的vue框架,在此作為記錄 vue+vux-ui這裡就不介紹了,有很多博客都寫的很詳細了。 下麵簡單記錄下axios 和 mock 1.axios <1> 安裝axios <2> 使用axios 1.因為有 ...
1.首先感謝同事
2.之前一直在做angularjs的項目,目前vue火熱,所以自己搭建了一個的vue框架,在此作為記錄
vue+vux-ui這裡就不介紹了,有很多博客都寫的很詳細了。
下麵簡單記錄下axios 和 mock
1.axios
<1> 安裝axios
npm install axios
<2> 使用axios
1.因為有時候項目需要稍微封裝一下axios,所以我這裡並沒有直接像官網那裡在入口main.js直接引入axios
2.按照官網的要求,我在src目錄下新建了一個文件axios,然後新建了兩個js文件
1.axios.post.form.js
2.axios.post.json.js
這裡記錄第個axios.post.form.js文件:
1.首先引入axios
import axios from 'axios'
2.自定義配置新建一個 axios 實例
const axiosPostForm = axios.create({ baseURL: "", // api的base_url timeout: 5000, // request timeout headers: { 'Content-Type': 'application/json' } })
3.創建請求過濾器
axiosPostForm.interceptors.request.use( config => { //根據實際項目修改攔截器 console.log(config); config.data = config.data||{} return config; }, error =>{ return Promise.reject(error); });
4.創建響應過濾器
axiosPostForm.interceptors.response.use( response => { console.log(response); return response.data }, error => { return Promise.reject(error); })
5.返回封裝之後的axiosPostForm
export default axiosPostForm
下麵是完整的這個JS文件
import axios from 'axios' const axiosPostForm = axios.create({ baseURL: "", // api的base_url timeout: 5000, // request timeout headers: { 'Content-Type': 'application/json' } }) axiosPostForm.interceptors.request.use( config => { //根據實際項目修改攔截器 console.log(config); config.data = config.data||{} return config; }, error =>{ return Promise.reject(error); }); axiosPostForm.interceptors.response.use( response => { console.log(response); return response.data }, error => { return Promise.reject(error); }) export default axiosPostForm
<3> 接下來需要在入口main.js中引入該封裝之後的axiosPostForm,以便全局使用
//引入axios
import axiosPostForm from './axios/axios.post.form'
//在vue的原型鏈上增加axiosPostForm
Vue.prototype.$axiosPostForm = axiosPostForm;
<4>在你的應用組建就可以直接使用封裝之後的$axiosPostForm了,一下代碼:
this.$axiosPostForm({ method: 'post', url:"/userInfo", //這裡是你的後端地址,如果沒有,請看下麵引入mock擋板數據 data: { id: '100001', name: 'xxxxxx' } }).then(function (res) { console.log(res) })
以上,一個完整的axios服務已經完成,下麵引入mock擋板
2.mockjs
<1> 安裝mockjs
npm install mockjs
<2> 在src文件新建mock文件夾
1.在mock文件夾目錄下,新建兩個文件,一個index.js,一個usermock.js
2.首先先在usermock.js,新建擋板數據,並暴露出來,代碼如下:
export default { getUserInfo:()=>{ return { code:"0", message:"訪問成功", data:[{ id:1, licNumber:'陝A79898', color:1, buyTime:'2017-04-01' }, { id:2, licNumber:'陝A2222', color:1, buyTime:'2017-04-01' }, { id:3, licNumber:'陝A3333', color:1, buyTime:'2017-04-01' }] } } }
<3> 在mock文件夾下的index.js中引入mock和上面寫的usermock.js,代碼如下
import Mock from 'mockjs'; import userInfo from "./usermock" Mock.mock("/userInfo",'post',userInfo.getUserInfo()); export default Mock
<4>在入口文件main.js裡面加入對Mock的控制(是否使用mock擋板)
const mock = true; if(mock){ require("./mock"); }
<5> 以上,在你的應用組建就可以直接使用
this.$axiosPostForm({ method: 'post', url:"/userInfo", data: { id: '100001', name: 'xxxxxx' } }).then(function (res) { console.log(res) })
over,以上是本次記錄!!!