vue中引用 axios

原创 15038098692 随笔 随笔 197阅读 2018-12-16 18:43:31 举报

1.axios在vue-cli项目中的封装使用 https://www.jianshu.com/p/31f52aade33d

2.vue中Axios的封装与API接口的管理详解 https://www.jb51.net/article/145341.htm

3.vue2+webpack使用axios跨域请求数据的设置
https://blog.csdn.net/qq_37705048/article/details/82663239

3.1Vue如何在webpack设置代理解决跨域问题
https://www.cnblogs.com/zishang91/p/8909900.html

3.2 (图文解释)https://blog.csdn.net/it_cgq/article/details/78781422

一.axios是promise实现的,提到promise,首先应该想到IE不支持,所以应该先加个垫片,给IE做下兼容性处理

npm install --save babel-polyfill
然后再main.js中引入
import 'babel-polyfill'

二..先安装axios
npm install --save axios
然后建议在src下新建一个文件夹api专门用来存放接口相关的文件和配置,
在api文件夹下新建api.js文件和index.js文件

在api.js中代码入下

import axios from 'axios'; // 在api.js中引入axios
import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,后面会提到

let base = '/api';

let loadingInstance;

export default axios;

axios.defaults.timeout = 30000; //设置默认的请求超时时间。例如超过了30s,就会告知用户当前请求超时,请刷新等

let instance = axios.create({ //请求头的设置,请求的时候,我们需要加上一个请求头,所以可以在这里进行一个默认的设置,
headers: {'content-type': 'application/json',
'X-Auth-Token': (sessionStorage.getItem('Auth') != null && sessionStorage.getItem('Auth') != undefined)?sessionStorage.getItem('Auth'):''
}
});

//•请求拦截
我们在发送请求前可以进行一个请求的拦截,为什么要拦截呢,我们拦截请求是用来做什么的呢?
比如,有些请求是需要用户登录之后才能访问的,或者post请求的时候,我们需要序列化我们提交的数据。
这时候,我们可以在请求被发送之前进行一个拦截,从而进行我们想要的操作。
instance.interceptors.request.use()

//•响应拦截
响应拦截器很好理解,就是服务器返回给我们的数据,我们在拿到之前可以对他进行一些处理。
例如上面的思想:如果后台返回的状态码是200,则正常返回数据,
否则的根据错误的状态码类型进行一些我们需要的错误,
其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

三.封装get方法和post方法

/**

  • get方法,对应get请求
  • @param {String} url [请求的url地址]
  • @param {Object} params [请求时携带的参数]
    */
    export function get(url, params){
    return new Promise((resolve, reject) =>{
    axios.get(url, {
    params: params
    })
    .then(res => {
    resolve(res.data);
    })
    .catch(err => {
    reject(err.data)
    })
    });
    }
    /**
  • post方法,对应post请求
  • @param {String} url [请求的url地址]
  • @param {Object} params [请求时携带的参数]
    */
    export function post(url, params) {
    return new Promise((resolve, reject) => {
    axios.post(url, QS.stringify(params))
    .then(res => {
    resolve(res.data);
    })
    .catch(err => {
    reject(err.data)
    })
    });
    }

axios的封装基本就完成了,下面再简单说下api的统一管理。

整齐的api就像电路板一样,即使再复杂也能很清晰整个线路。上面说了,我们会新建一个api.js,然后在这个文件中存放我们所有的api接口。

首先我们在api.js中引入我们封装的get和post方法

?

1
2
3
4

/**

  • api接口统一管理
    */
    import { get, post } from './http'

现在,例如我们有这样一个接口,是一个post请求:

http://www.baiodu.com/api/v1/users/my_address/address_edit_before

我们可以在api.js中这样封装:

export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);

我们定义了一个apiAddress方法,这个方法有一个参数p,p是我们请求接口时携带的参数对象。而后调用了我们封装的post方法,post方法的第一个参数是我们的接口地址,第二个参数是apiAddress的p参数,即请求接口时携带的参数对象。最后通过export导出apiAddress。

然后在我们的页面中可以这样调用我们的api接口:

import { apiAddress } from '@/request/api';// 导入我们的api接口
export default {
name: 'Address',
created () {
this.onLoad();
},
methods: {
// 获取数据
onLoad() {
// 调用api接口,并且提供了两个参数
apiAddress({
type: 0,
sort: 1
}).then(res => {
// 获取数据成功后的其他操作
………………
})
}
}
}

其他的api接口,就在pai.js中继续往下面扩展就可以了。
友情提示,为每个接口写好注释哦!!!
api接口管理的一个好处就是,我们把api统一集中起来,如果后期需要修改接口,我们就直接在api.js中找到对应的修改就好了,
而不用去每一个页面查找我们的接口然后再修改会很麻烦。
关键是,万一修改的量比较大,就规格gg了。
还有就是如果直接在我们的业务代码修改接口,一不小心还容易动到我们的业务代码造成不必要的麻烦。

/ 接口/
export const queryNews = params => { return instance.post(${base}/news/queryNews, params).then(res => res.data); };

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复